為什么此CSS菜單不起作用？

Question

我似乎無法弄清楚為什么它不能正常工作。 它應該是一個通用的下拉CSS菜單。 我還沒有進入使下拉列表不可見的部分（我將設置display：設置為無，大聲笑），但現在我只是在嘗試正確的布局。 但是，不能正常運行的部分是實際的下拉部分。 它應該將鼠標懸停在頁面內容上，但是即使我設置了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子菜單上的position: absolute ，否則它仍然是文檔流的一部分，並且在可見時會增加高度。

Answer 2

僅當內容可以彼此重疊時， z-index才真正重要。 只有在位置不是靜態的情況下才有可能。

在您的情況下，內部列表會根據正常流放置在li內，因此在計算li的高度時會考慮在內。 高度被傳遞到外部列表，然后將內容下推。

要解決此問題，您需要使內部列表不等於列表項的高度。 為此，將位置設置為absolute 。