Positioning the drop down menu - html

Question

Hi Please help me on this issue.
Issue: dropdown values of the menu is shown in other menu (it is not in-line with menu).
Example: Dropdown values of Home menu is Home-1, Home-2, Home-3 and it will shown under National parties menu. How can I show appropriately under the right menu
Demo: http://jsfiddle.net/shrikanth/Sv79m/
<div id="menu">
<ul>
< li>Home<ul>
<li>Home-1</li>
<li>Home-2</li>
<li>Home-3</li>
</ul></li>
<li ><a href="aboutus.html">National Parties<ul>
<li>BJP</li>
<li>Congress</li>
<li>CPM</li>
</ul></a></li>
<li><a href="services.html">Services<ul>
<li>TV</li>
<li>Cell</li>
<li>Radio</li>
</ul></a></li>
<li>Contact Us
<ul>
<li>India</li>
<li>USA</li>
<li>SAUS</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 1px 2px 1px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu ul li a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
#menu ul li ul{
display:none;
position:absolute;
top:31px;
background-color:red;
}
#menu ul li:hover ul{
display:inline-block;
height:auto;
width:135px;
}
#menu ul li ul:before{
content: '';
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 37%;
margin-left:10px;
}

Answer 1

http://jsfiddle.net/Sv79m/1/
Give #menu li a position of relative:
#menu li {
display: inline;
padding: 20px;
position:relative;
}
Adjust a little the absolute positioning with left:0 :
#menu ul li ul{
display:none;
position:absolute;
top:51px;
background-color:red;
left:0;
}
Edit:
Also, to solve the overlapping links, add this:
#menu ul li ul li{
display:block;
padding:5px;
}
http://jsfiddle.net/Sv79m/2/
Also, you had some unclosed tags, I closed them and now it's much better:
http://jsfiddle.net/Sv79m/3/
<a href="aboutus.html">National Parties<ul>
^^CLOSE ME!

Answer 2

It's all down to the positioning of the containing element. If you use position: relative; it allows you to position elements absolutely inside of it.
Here's a tutorial on creating a dropdown navigation, it explains about the positioning and structure. This should help - CSS 3 navigation menu