1

我有使用 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>
4

1 回答 1

0

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

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

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

}

  2. 将第二级 ul 定位为绝对顶部偏移量等于第一级 lis 高度：

    #navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    top:1.8em;
}
于 2013-07-13T17:45:44.777 回答