Html 为什么'；这个CSS菜单不行吗？

我似乎不明白这为什么不能正常工作。它应该是一个通用的css下拉菜单。我还没有谈到我使下拉列表不可见的部分（我将设置display:none，当我看到它时，lol），但现在我只是想让布局正确。但是，没有按我希望的方式工作的部分是实际的下拉部分。它应该悬停在页面内容上，但它似乎在向下推动页面内容，即使我设置了z索引。有人知道为什么吗

以下是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>

---

您需要在子菜单上显示

position:absolute

，否则它仍然是文档流的一部分，并且在可见时会增加高度。

只有当内容可以放在彼此的顶部时，

z-index

才真正重要。这只有在系统不是静态的情况下才有可能

在您的情况下，内部列表根据正常流程放置在

li

中，因此，在计算

li

的高度时会考虑到这一点。高度会被转移到外部列表，然后外部列表会向下推送内容

---

要解决此问题，需要使内部列表的总和不等于列表项的高度。为此，将位置设置为

absolute

请使用类似jsfiddle.netIt的东西添加演示。今天我学到了一些关于z-index的新知识，哈哈。

#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;
}