Question

我有使用css的菜单。第二级菜单在实际菜单项悬停下面右侧弹出一个levwl。在下面的示例中，我希望第二级显示在“键盘输入”菜单项的行中。我附上了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>

Answer 1

演示：http://jsbin.com/ewolik/1/edit 简单的下拉菜单： http://jsbin.com/ewolik/2/edit

将Li元素的第一级相对定位：

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

}

绝对定位第二级ul，顶部偏移量等于第一级lis height：

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

CSS二级菜单 - 第二级没有出现在正确的位置

1 个答案: