為什么我的固定導航欄中的下拉div沒有顯示在每個父鏈接下？

Question

我正在嘗試使我的導航欄下拉列表能夠使用JavaScript工作。 除了將鼠標懸停在其余項目上之外，其他所有內容都正常工作，下拉列表僅顯示在第一個鏈接下方？ 我嘗試解決它，並將其放入列表中，但是我不想這樣做，但是當我這樣做時，最終卻破壞了整個導航欄。

這就是我的意思：

style.css

body {
    font-family: Raleway;
    font-size: 13px;
    margin: 0;
    padding: 0;
    height: 100%;
}

a {
    text-decoration: none;
    color: rosybrown
}

#title {
    background-color:white;
    float: left;
    padding-left: 2%;
    position: absolute;
    padding-top: 1.5%;
}

#nav {
    background-color: white;
    height: 79px;
    min-width: 600px; 
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
}

#nav a {
    text-decoration: none;
}

#nav a:link {
    color: grey;
}
#nav a:hover {
    background-color: lightgrey;
}
#nav a:visited {
    color: maroon;
}
#nav a:active {
    color: maroon;
}

#navLink {
    padding-top: 2.5%;
    padding-right: 2%;
    letter-spacing: 3px;
    float: right;
}

#navLink div {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: whitesmoke;
}

#navLink div a {
        position: relative;
        display: block;
        margin: 0;
        width: auto;
        padding: 5px 10px;
        text-align: left;
    }

.container {
    width: 100%;
}

#content {
    padding-top: 10%;
    padding-left: 15%;
    padding-right: 15%;
    text-align: justify;
    letter-spacing: 1px;
    line-height: 150%;
    padding-bottom: 60px;
}

.image {
    width: 100%;
    max-height: 500px;
    object-fit: fill; 
}

.image:hover {
    opacity: 0.8;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

#footer {
    background-color: rgba(33, 33, 33, 0.89);
    position: fixed;
    bottom:0px;
    left:0xp;
    width:100%;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}

.stopFloat {
    clear:both;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

這是我的導航欄代碼段：

<div id="nav">
    <div id="title">
        <img src="pics/logo.png" width="160" height="39" alt="">
    </div>

    <div id="navLink">
        <a href="index.html" 
           onmouseover="dropDown('dd1')"
           onmouseout="closeddtime()">Home</a>
        <div id="dd1"
             onmouseover="cancelddclosetime()"
             onmouseout="closeddtime()">
            <a href="#">Video</a>
            <a href="#">Who</a>
            <a href="#">What</a>
        </div>
        <a href="02_advLayout/index.html"
           onmouseover="dropDown('dd2')"
           onmouseout="closeddtime()">Content</a>
        <div id="dd2"
             onmouseover="cancelddclosetime()"
             onmouseout="closeddtime()">
            <a href="#">About Us</a>
            <a href="#">Coffee</a>
            <a href="#">Shop</a>
            <a href="#">Class</a>
        </div>
        <a href="05_js_fw/index.html"
           onmouseover="dropDown('dd3')"
           onmouseout="closeddtime()">JS Framework</a>
        <div id="dd3"
             onmouseover="cancelddclosetime()"
            onmouseout="closeddtime()">
            <a href="#">Video</a>
            <a href="#">Who</a>
            <a href="#">What</a>
        </div>
        <a href="labs.html">Labs</a>
    </div>
</div>

Answer 1

問題出在您的DOM結構上。 在您的代碼中，您必須為每個下拉列表分別提供左偏移量，以使其在父項下正確顯示。 但是如果以后要更改導航，則還必須調整css以保持對齊。

因此，我認為最好重組您的代碼。 可能您可以參考以下導航。 這是沒有任何js的簡單CSS導航。

 ul, li{ margin: 0; padding: 0; list-style: none; } li{ position: relative; display: inline; margin: 0 20px; } li ul{ position: absolute; width: 150px; left: 0; top: 100%; display: none; } li:hover ul{ display: block; } li ul li{ display: block; margin: 10px 0; } 

 <div id="nav"> <div id="title"> <img src="pics/logo.png" width="160" height="39" alt=""> </div> <div id="navLink"> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a> <ul> <li><a href="#">Sub menu</a></li> <li><a href="#">Sub menu</a> </li> <li><a href="#">Sub menu</a></li> <li><a href="#">Menu</a></li> </ul> </li> <li><a href="#">Sub menu</a></li> <li><a href="#">Sub menu</a></li> </ul> </div> </div>