0

我似乎无法弄清楚为什么这不能正常工作。它应该是一个通用的下拉 CSS 菜单。我还没有达到使下拉列表不可见的部分（当我到达它时我将设置显示：无，大声笑）但现在我只是试图让布局正确。但是，没有按我想要的方式工作的部分是实际的下拉部分。它应该悬停在页面内容上，但即使我设置了 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;
}
4

2 回答 2

0

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

于 2013-09-08T17:19:35.323 回答
0

唯一真正重要的z-index是内容可以相互叠加。这只有在位置不是静态的时候才有可能。

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

要解决此问题，您需要使内部列表的总和不超过列表项的高度。为此，请将位置设置为absolute。

于 2013-09-08T17:26:34.330 回答