Question

我似乎无法弄清楚为什么这不能正常工作。它应该是一个通用的下拉css菜单。我还没有到达下拉列表不可见的部分（当我到达时，我将设置display：none，大声笑）但是现在我只是想让布局正确。但是，不按我想要的方式运行的部分是实际的下拉部分。它应该悬停在页面内容上，但相反它似乎正在推动它，即使我设置了一个z-index。谁知道为什么？

这是HTML：

<div id="navigation">
    <div id="nav-container">
        <ul id="nav">
            <li><a href="index.html">HOME</a></li>
            <li><a href="page2.html">PAGE 2</a></li>
            <li><a href="page3.html">PAGE 3</a></li>
            <li><a href="page4.html">PAGE 4</a></li>
            <li>
                <a href="test.html">TEST</a>
                <ul>
                    <li><a href="test2.html">TEST 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="content-container">
CONTENT GOES HERE
</div>

这是CSS：

#navigation {
    position: relative;
    top: 110px;
    width: 100%;
    height: 50px;
    background-color: #179326;
    z-index: 5;
}

#nav-container{
    width: 1000px;
    margin: 0 auto;
}

#nav {
    position: relative;
    padding: 0px;
    border: 0px;
    list-style-type: none;
}

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

#nav li {
    position: relative;
    float: left;
    padding: 0px;
    background-color: #179326;
    color: #FFFFFF;
    font-size: 25px;
    font-family: "Archivo Narrow", arial, sans-serif;
}

#nav li a {
    display: block;
    min-height: 40px;
    padding: 10px 25px 0px 25px;
    text-decoration: none;
    color: #FFFFFF;
}

#nav a:hover {
    background-color: #00691e;
}

Answer 1

您需要在子菜单上使用position: absolute，否则它仍然是文档流程的一部分，并会在可见时添加高度。

Answer 2

z-index只有在内容可以放在彼此之上时才真正重要。只有position不是静态的时候才有可能。

在您的情况下，内部列表根据正常流程放置在li内，因此在计算li的高度时会受到尊重。高度被转移到外部列表，然后将内容推下来。

要解决此问题，您需要使内部列表不添加到列表项的高度。为此，请将位置设置为absolute。

为什么这个CSS菜单不起作用？

2 个答案: