submenu in one line with css - html

Question

I want to make navigation menu like the picture above with hover on Menu. This is my sample code for the navigation menu.
<div id="menu">
<ul>
<li>Menu1
<ul class="submenu">
<li>Menu1Sub1</li>
<li>Menu1Sub2</li>
<li>Menu1Sub3</li>
<li>Menu1Sub4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Menu2Sub1</li>
<li>Menu2Sub2</li>
<li>Menu2Sub3</li>
</ul>
</li>
...
</ul>
</div>
Submenu position are in a line and I also want Submenu position to be exactly same for each Menu if possible.
How to do this with css?
this is what I tried so far not working as I intended.
#menu {
text-decoration:none;
}
#menu li {
line-height:20px;
float:left;
}
#menu li > ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul li {
line-height:13px;
float:left;
position:relative;
}
Any help would be very appreciated.

Answer 1

try this code:
#menu {
position: relative;
background-color: black;
text-decoration:none;
}
#menu li {
background-color: green;
padding: 10px;
height: 30px;
list-style: none;
line-height:30px;
float:left;
}
#menu li > ul {
display: none;
}
#menu > ul > li {
border: 2px solid white;
}
#menu > ul > li:hover {
border: 2px solid black;
}
#menu li:hover > ul {
display: block;
position: absolute;
top: 54px;
left: 0;
}
#menu li ul li {
float:left;
position:relative;
}
DEMO jsfiddle