0

なぜこれが適切に機能しないのか理解できないようです。これは、一般的なドロップダウン 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;
}
4

2 に答える 2

0

サブメニューが必要ですposition: absolute。それ以外の場合は、ドキュメント フローの一部であり、表示されると高さが追加されます。

于 2013-09-08T17:19:35.323 に答える