Horizontal sub menu issue - css

Question

I am facing a problem regarding horizontal submenu that needs to push down body content. But I am not getting it. I have tried out few things with different css. And I want to be done using CSS since it would be a responsive menu with 100% div. So I can't give any pixel width in sub ul. I have almost done it but main menu got push down when I hover on it. I know there might be a solution for this using CSS code and it would be great if someone can help me out on this. And if its can't be done with CSS then I would like to know if there is any jquery solution for it or not. Here I am sharing my CSS along with HTML.
""There are 3 menus in the given css and html and also you can see it in jsfiddle link as well that Menu 1 and Menu 2 submenu along with Body Content got push down but Menu 3 is working fine. I want to fix the Menu 1 and Menu 2 just like the Menu 3.""
Any help would be appreciated.
Thanks, Roy
HTML
<div id="menu">
<ul id="nav">
<li>Menu 1
<ul>
<li>fdesfc</li>
<li>drgdrg</li>
<li>dgvdvg</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>iuoluiouo</li>
<li>abcde</li>
<li>bhnhbnh</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3 Submenu item 1</li>
<li>Menu 3 Submenu item 2</li>
<li>Menu 3 Submenu item 3</li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="contArea">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
CSS
#menu{
width: 100%;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {display: inline;}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
position: absolute;
}
ul#nav li:hover > ul {
position: relative;
display: block;
height: 45px;
margin: 40px 0 0 0;
background: #aa0000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
.clear {
clear: both;
}
.contArea {
background: #ccc;
padding: 12px;
}
(on JSFiddle: http://jsfiddle.net/indy12/QG9L5/1/)

Answer 1

I assumed this is what u expect
http://jsfiddle.net/QG9L5/6/
add appropriate width and float to main(li) list item and sub lists (ul).
#menu {
width: 100%;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline;
}
ul#nav li.main{
float:left; width:150px;
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
position: absolute;
width:500px;
}
ul#nav li:hover > ul {
position: relative;
display: block;
height: 45px;
margin: 40px 0 0 0;
background: #aa0000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
.clear {
clear: both;
}
.contArea {
background: #ccc;
padding: 12px;
}