CSS两级菜单-第二级未显示在正确位置

我有使用css的菜单。第二级菜单在实际菜单项鼠标悬停下方一级右键弹出。在下面的示例中，我希望第二级显示在“键盘输入”菜单项的行中。我已经附加了html文件

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;
}

我的HTML：

<ul id="navbar">
    <li><a href="#">File</a>
        <ul>
            <li><a href="#">Match</a></li>
            <li><a href="#">View</a></li>
            <li><a href="#">Exit</a></li>
        </ul>
    </li>
    <li><a href="#">Data</a>
        <ul>
            <li><a href="#">Import Carbon CSV Files</a></li>
           <li><a href="#">Rework Carbon Components</a></li>
            <li><a href="#">Keyboard Entry</a>
            <ul>
                <li><a href="#">Orifice Data Entry</a></li>
                <li><a href="#">Leaflets Data Entry</a></li>
                <li><a href="#">Rings Data Entry</a></li>
            </ul>
            </li>            
            <li><a href="#">Specifications</a></li>
            <li><a href="#">Matched Components</a></li>

        </ul>
    </li>
    <li><a href="#">Reports</a>
        <ul>
            <li><a href="#">Audit Reports</a></li>

        </ul>
    </li>
    <li><a href="#">Admin</a>
        <ul>
            <li><a href="#">Security</a></li>

        </ul>
    </li>
 </ul>

演示： 简单下拉菜单：

将Li元素的第一级相对于：

#navbar li {
    list-style: none;
    float: left;
    position:relative;

}

定位第二级ul，使其顶部偏移等于第一级lis高度：

#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    top:1.8em;
}

---

嗨，Shadow，它没有按预期工作。当我试图将鼠标移到第一级菜单上时，它就消失了。我的问题只在第二级，因为我无法将同一级的内容直接放到它的父菜单项上。当我将鼠标悬停在下拉菜单上时，它就消失了。sam也对你的链接很感兴趣。你能在“键盘输入->孔板输入”菜单中导航吗？试试这个。它可以工作，你只需要添加链接和颜色。您的演示中似乎有一些不正确的嵌套元素和奇怪的不必要的css，这会导致问题。如果您能提供帮助，我们将不胜感激。问题是什么？当您将鼠标悬停在第一级菜单上时，会出现第二级菜单？请参见jsbin.com/ewolik/2/edit