Please help me to fix the error in this menu code - html

Question

I have learnt CSS online and I am new to web designing. Need some expert opinion here, I may have written something wrong or stupid. Please forgive that as I am a beginner.
Here are my CSS and HTML codes:
#menu {
float: left;
width: 1000px;
height: 30px;
background-color:#0066FF;
border-bottom: 1px solid #333;``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display:inline;
}
li ul {display: none;}
li:hover ul {display: block; position:relative;}
li:hover li a{background: #0066FF;}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover, #menu li .current{
color: #FFFF00;
}
#menu ul li:hover ul{
width: 150px;
white-space: nowrap
height: 10px;
text-align: center;
background:#0066FF;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Quran
<ul>
<li>Translation</li>
<li>Tajweed</li>
<li>Tafseer</li>
<li>Qoutes</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari</li>
<li>Sahih Muslim</li>
<li> Sunan Abu-Dawud</li>
<li>al-Tirmidhi</li>
<li>al-Nasa'i</li>
<li>Ibn Maja </li>
</ul></li>
<li>Wazaif
<ul>
<li>Allah's help</li>
<li>Rizzaq</li>
<li>Aulaad</li>
<li>Marriage</li>
</ul></li>
<li>Rights & Duties
<ul>
<li>As Parents</li>
<li>As Husband</li>
<li>As Wife</li>
<li>As Son</li>
<li>As Daughter</li>
</ul></li>
<li>Videos
<ul>
<li>Molana Tariq Jameel</li>
<li>Dr Zakir Naik</li>
<li>Dr Farhat Hashmi</li>
<li>Naat videos</li>
</ul></li>
<li>Quran & Science</li>
<li>Library
<ul>
<li>Masnoon Duain</li>
<li>Tib-e-Nabvi</li>
<li>Tafseer</li>
<li>Islamic comerace</li>
</ul></li>
<li>FAQs</li>
<li>Blogs</li>
<li>Contacts</li>
</ul>
</div>

Answer 1

It looks like the problem is that you haven't positioned the sub-menus properly.
Because the sub-menu have not been given position:absolute they remain in the documents flow and so disturb other elements when shown.
Adding position:absolute removes them from the flow and solves the problem.
In order to be positioned according to the parent li, that li needs to be a block (hence display:inline-block)(you could float the li too if that's your choice) and be given position:relative.
Here's a suggestion that should help you along the way.
#menu ul li {
display:inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top:100%;
left:0;
}
li:hover ul {
display: block;
}
JSfiddle Demo
#menu {
float: left;
width: 1000px;
height: 30px;
background-color: #0066FF;
border-bottom: 1px solid #333;
``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
li:hover li a {
background: #0066FF;
}
#menu ul li a {
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
color: #FFFF00;
}
#menu ul li:hover ul {
width: 150px;
white-space: nowrap height: 10px;
text-align: center;
background: #0066FF;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>Quran
<ul>
<li>Translation
</li>
<li>Tajweed
</li>
<li>Tafseer
</li>
<li>Qoutes
</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari
</li>
<li>Sahih Muslim
</li>
<li> Sunan Abu-Dawud
</li>
<li>al-Tirmidhi
</li>
<li>al-Nasa'i
</li>
<li>Ibn Maja
</li>
</ul>
</li>
<li>Wazaif
<ul>
<li>Allah's help
</li>
<li>Rizzaq
</li>
<li>Aulaad
</li>
<li>Marriage
</li>
</ul>
</li>
<li>Rights & Duties
<ul>
<li>As Parents
</li>
<li>As Husband
</li>
<li>As Wife
</li>
<li>As Son
</li>
<li>As Daughter
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Molana Tariq Jameel
</li>
<li>Dr Zakir Naik
</li>
<li>Dr Farhat Hashmi
</li>
<li>Naat videos
</li>
</ul>
</li>
<li>Quran & Science
</li>
<li>Library
<ul>
<li>Masnoon Duain
</li>
<li>Tib-e-Nabvi
</li>
<li>Tafseer
</li>
<li>Islamic comerace
</li>
</ul>
</li>
<li>FAQs
</li>
<li>Blogs
</li>
<li>Contacts
</li>
</ul>
</div>