html - 隐藏一些列表条目的 CSS/HTML 下拉菜单

Question

我正在开发一个 HTML/CSS 下拉菜单，现在每当我将鼠标悬停在菜单顶部时，并不是每个条目都显示在下拉菜单中。顶部的一两个条目总是丢失。这是我的 HTML:

<!-- Navigation Bar -->
    <ul id="navi">
        <li><a href="">Engines</a>
            <ul>
                <li><a href="">DiniJS</a></li>
                <li><a href="">Foxen2D</a></li>
                <li><a href="">Vivon3D</a></li>
            </ul>
        </li>
        <li><a href="">Team</a>
            <ul>
                <li><a href="">Rob Myers</a></li>
                <li><a href="">Nate Mast</a></li>
            </ul>
        </li>
        <li><a href="">Contact</a>
            <ul>
                <li><a href="">Email</a></li>
                <li><a href="">Twitter</a></li>
            </ul>
        </li>
    </ul>

这是 CSS:

#navi ul {
    list-style:none;
    margin:0px;
    padding:0px;
}

#navi li {
    float:left;
    width:120px;
    padding-top: 13px;
    padding-bottom:8px;
    background-color:black;
    text-align:center;
    font-family:"Courier New";
}

#navi li:hover {
    background-color:#303030;
}

#navi li ul li {
    float:none;
    width:116px;
    text-align:left;
    padding-left:4px;
    border-top:1px solid #303030;
    display:none;
    font-size:85%;
    position:absolute;
    z-index:2;
}

#navi li:hover ul li {
    display:block;
}

#navi a {
    text-decoration:none;
    color:red;
}

如果这是解决此问题的更好方法，我愿意接受任何 Javascript 或 JQuery 建议。谢谢。

Answer 1

您的问题是所有子菜单项都一个接一个地堆叠。只需将 position: absolute; 从 #navi li ul li block 移动到新的 #navi li ul block 即可解决此问题。