为什么我的固定导航栏中的下拉div没有显示在每个父链接下？

Question

I am trying to get my nav bar dropdown list to work using JavaScript. I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.

Here's what I mean:

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

Here's my navbar code snippet:

<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

The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.

So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.

 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>