CSS two level menu - second level doesn't appear in proper position - css

Question

I have the menu using css. The second level menu pops out right one levwl below the actual menu item hover. In the below example, i want the second level appear in line to "Keyboard Entry" menu item. I have attached the html file.
CSS:
#navbar {
margin: 0;
padding: 0;
height: 1.8em;
background-color: #5e8ce9;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a
{
display: block;
padding: 4px 10px 4px 10px;
background-color: #5e8ce9;
color: #fff;
font-size: 0.85em;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
#navbar li:hover ul li:hover ul, #navbar li.hover ul li.hover ul
{
display: block;
position: absolute;
margin-left: 100%;
top:1;
}
#navbar li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#navbar li:hover ul, #navbar li li:hover ul, #navbar li.sfhover ul, #navbar li li.sfhover ul {
left: auto;
}
MY HTML:
<ul id="navbar">
<li>File
<ul>
<li>Match</li>
<li>View</li>
<li>Exit</li>
</ul>
</li>
<li>Data
<ul>
<li>Import Carbon CSV Files</li>
<li>Rework Carbon Components</li>
<li>Keyboard Entry
<ul>
<li>Orifice Data Entry</li>
<li>Leaflets Data Entry</li>
<li>Rings Data Entry</li>
</ul>
</li>
<li>Specifications</li>
<li>Matched Components</li>
</ul>
</li>
<li>Reports
<ul>
<li>Audit Reports</li>
</ul>
</li>
<li>Admin
<ul>
<li>Security</li>
</ul>
</li>
</ul>

Answer 1

Demo: http://jsbin.com/ewolik/1/edit
Simple dropdown Menu:
http://jsbin.com/ewolik/2/edit
Position the first level of Li elements relative:
#navbar li {
list-style: none;
float: left;
position:relative;
}
Position the second level ul with absolutely with an top offset equal to the first level lis height:
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
top:1.8em;
}