使用绝对位置时不显示下拉菜单

Question

我正在尝试使用 HTML/CSS/JS 创建一个简单的网页，将鼠标悬停在 nav_menu 上时会出现一些下拉菜单。当我在 div 中使用绝对位置作为下拉菜单时，悬停时它不会弹出（当使用相对位置时它会下降但我希望它是绝对的）。我认为问题出在我的 css?

这是我的 HTML 代码的正文部分（#subnav、#subnav1、#subnav2 和 #subnav3 是四个下拉菜单）：

$(document).ready(function(){
            var total = 4;
            var current = 1;
            $("#img1").show()
            $("#btnNext").click(function(){
                current++;
                if(current>total){current=1;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });
            $("#btnPrev").click(function(){
                current--;
                if(current<1){current=total;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });

            $("#listHome").mouseenter(function(){
                $("#subnav").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav2").slideUp(0);   
                $("#subnav3").slideUp(0);
            });
            $("#subnav").mouseleave(function(){
                    $("#subnav").slideUp(200);  
            });


            $("#listAbout").mouseenter(function(){
                $("#subnav1").slideDown(200);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
                $("#subnav3").slideUp(0);

            });
            $("#subnav1").mouseleave(function(){
                $("#subnav1").slideUp(200);
            });

            $("#listServices").mouseenter(function(){
                $("#subnav2").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav3").slideUp(0);
            });
            $("#subnav2").mouseleave(function(){
                $("#subnav2").slideUp(200);
            });
            $("#listExtra").mouseenter(function(){
                $("#subnav3").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
            });
            $("#subnav3").mouseleave(function(){
                $("#subnav3").slideUp(200);
            })
        });

*{padding:0;margin:0;}
        a.ahr:link{color:grey}
        a.ahr:visited{color:white}
        a.ahr:hover{color:red}
        #pj{padding: 5px 0px 0px 0px;}
        #title{text-align:center; background:linear-gradient(to left, white , grey) ;height:50px;border:thick 333333 solid}

        #text{float:right; width:70%; padding:45px 10px 0px 0px;position:relative; border-bottom:thin black dashed; background:linear-gradient(to bottom, CCCCCC , CCCCCC);  transform: skew(0,0);}
        #imgs{ height:100%; background:linear-gradient(to top, white , grey);position:fixed; padding:70px 30px 0px 30px; float:left;width:23% ; clear:both; position:absolute}

        #nav{background:linear-gradient(to left, black , grey); height:20px;text-valign:center;padding:2px;text-decoration:none; width:100%;}
        #subnav{background:white; width:15%; text-align:center; position:absolute; margin:0px 0px 0px 1%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav1{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 4%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav2{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 9%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav3{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 15%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #cpyr{background: linear-gradient(to right, black , grey); text-align:center;position:fixed; bottom:0px; width:100%; color:white}
        #ul1 li a{text-decoration:none}
        #ul2 li a{text-decoration:none}
        #ul3 li a{text-decoration:none}
        #ul4 li a{text-decoration:none}
        #ul5 li a{text-decoration:none}
        #btnNext{width:50px}
        #btnPrev{width:50px}
        #imgbtn{padding:0px 95px; display:inline}
        #ul1 li {list-style-type:none; padding:2px 10px}
        #ul2 li {list-style-type:none; padding:2px 10px}
        #ul3 li {list-style-type:none; padding:2px 10px}
        #ul4 li {list-style-type:none; padding:2px 10px}
        #ul5 li {list-style-type:none; padding:2px 10px}
        img.imgss{width:300px; height:300px; display:none; border:thick 333333 solid;}
        .uList{ display:inline; border-right:thin white solid; padding:2px}
        .uList1{border-bottom:thin white solid; padding:10px;}
        .uList2{border-bottom:thin white solid; padding:10px;}
        .uList3{border-bottom:thin white solid; padding:10px}
        .uList4{border-bottom:thin white solid; padding:10px}
        body{background-color:CCCCCC;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div id="title"><h1 id="pj">Welcome</h1></div>
        <div id="nav">
            <ul id="ul1" >
                <li class="uList" id="listHome"><a class="ahr" href="index.html">Home</a></li>
                <li class="uList" id="listAbout"><a class="ahr" href="index.html">About</a></li>
                <li class="uList" id="listServices"><a class="ahr" href="index.html">Services</a></li>
                <li class="uList" id="listExtra"><a class="ahr" href="index.html">Extras</a></li>
            </ul>
        </div>
        <div id="subnav">
            <ul id="ul2" >
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 1</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 2</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 3</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 4</a></li>
            </ul>
        </div>
        <div id="subnav1">
            <ul id="ul3" >
                <li class="uList2"><a class="ahr" href="proj.html">About Option 1</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 2</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 3</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 4</a></li>
            </ul>
        </div>
        <div id="subnav2">
            <ul id="ul4" >
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 1</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 2</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 3</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 4</a></li>
            </ul>
        </div>
        <div id="subnav3">
            <ul id="ul5" >
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 1</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 2</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 3</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 4</a></li>
            </ul>
        </div>

        <div id="imgs">
            <img src="images/cat.jpg" class="imgss" id="img1"/>
            <img src="images/earth.jpg" class="imgss" id="img2"/>
            <img src="images/shark.jpg" class="imgss" id="img3"/>
            <img src="images/polar.jpg" class="imgss" id="img4"/><br>
            <div id="imgbtn">
                <button id="btnPrev" class="btns"><<</button>
                <button id="btnNext" class="btns">>></button>
            </div>
        </div>
        <div id="text">
            <h3>PROJECT</h3>
            **********************************************************************************************
            **********************************************************************************************

        </div>
        <div id="cpyr">Copyright &copy; 2018</h1></div>
        </div>

    </div>
</body>

Answer 1

您只需将 z-index 添加到 #subnav, #subnav1, #subnav2, #subnav3，如下所示：

$(document).ready(function(){
            var total = 4;
            var current = 1;
            $("#img1").show()
            $("#btnNext").click(function(){
                current++;
                if(current>total){current=1;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });
            $("#btnPrev").click(function(){
                current--;
                if(current<1){current=total;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });

            $("#listHome").mouseenter(function(){
                $("#subnav").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav2").slideUp(0);   
                $("#subnav3").slideUp(0);
            });
            $("#subnav").mouseleave(function(){
                    $("#subnav").slideUp(200);  
            });


            $("#listAbout").mouseenter(function(){
                $("#subnav1").slideDown(200);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
                $("#subnav3").slideUp(0);

            });
            $("#subnav1").mouseleave(function(){
                $("#subnav1").slideUp(200);
            });

            $("#listServices").mouseenter(function(){
                $("#subnav2").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav3").slideUp(0);
            });
            $("#subnav2").mouseleave(function(){
                $("#subnav2").slideUp(200);
            });
            $("#listExtra").mouseenter(function(){
                $("#subnav3").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
            });
            $("#subnav3").mouseleave(function(){
                $("#subnav3").slideUp(200);
            })
        });

*{padding:0;margin:0;}
        a.ahr:link{color:grey}
        a.ahr:visited{color:white}
        a.ahr:hover{color:red}
        #pj{padding: 5px 0px 0px 0px;}
        #title{text-align:center; background:linear-gradient(to left, white , grey) ;height:50px;border:thick 333333 solid}

        #text{float:right; width:70%; padding:45px 10px 0px 0px;position:relative; border-bottom:thin black dashed; background:linear-gradient(to bottom, CCCCCC , CCCCCC);  transform: skew(0,0);}
        #imgs{ height:100%; background:linear-gradient(to top, white , grey);position:fixed; padding:70px 30px 0px 30px; float:left;width:23% ; clear:both; position:absolute}

        #nav{background:linear-gradient(to left, black , grey); height:20px;text-valign:center;padding:2px;text-decoration:none; width:100%;}
        #subnav{background:white; width:15%; text-align:center; position:absolute; margin:0px 0px 0px 1%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav1{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 4%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav2{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 9%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav3{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 15%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #cpyr{background: linear-gradient(to right, black , grey); text-align:center;position:fixed; bottom:0px; width:100%; color:white}
        #ul1 li a{text-decoration:none}
        #ul2 li a{text-decoration:none}
        #ul3 li a{text-decoration:none}
        #ul4 li a{text-decoration:none}
        #ul5 li a{text-decoration:none}
        #btnNext{width:50px}
        #btnPrev{width:50px}
        #imgbtn{padding:0px 95px; display:inline}
        #ul1 li {list-style-type:none; padding:2px 10px}
        #ul2 li {list-style-type:none; padding:2px 10px}
        #ul3 li {list-style-type:none; padding:2px 10px}
        #ul4 li {list-style-type:none; padding:2px 10px}
        #ul5 li {list-style-type:none; padding:2px 10px}
        img.imgss{width:300px; height:300px; display:none; border:thick 333333 solid;}
        .uList{ display:inline; border-right:thin white solid; padding:2px}
        .uList1{border-bottom:thin white solid; padding:10px;}
        .uList2{border-bottom:thin white solid; padding:10px;}
        .uList3{border-bottom:thin white solid; padding:10px}
        .uList4{border-bottom:thin white solid; padding:10px}
        body{background-color:CCCCCC;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div id="title"><h1 id="pj">Welcome</h1></div>
        <div id="nav">
            <ul id="ul1" >
                <li class="uList" id="listHome"><a class="ahr" href="index.html">Home</a></li>
                <li class="uList" id="listAbout"><a class="ahr" href="index.html">About</a></li>
                <li class="uList" id="listServices"><a class="ahr" href="index.html">Services</a></li>
                <li class="uList" id="listExtra"><a class="ahr" href="index.html">Extras</a></li>
            </ul>
        </div>
        <div id="subnav">
            <ul id="ul2" >
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 1</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 2</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 3</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 4</a></li>
            </ul>
        </div>
        <div id="subnav1">
            <ul id="ul3" >
                <li class="uList2"><a class="ahr" href="proj.html">About Option 1</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 2</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 3</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 4</a></li>
            </ul>
        </div>
        <div id="subnav2">
            <ul id="ul4" >
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 1</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 2</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 3</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 4</a></li>
            </ul>
        </div>
        <div id="subnav3">
            <ul id="ul5" >
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 1</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 2</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 3</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 4</a></li>
            </ul>
        </div>

        <div id="imgs">
            <img src="images/cat.jpg" class="imgss" id="img1"/>
            <img src="images/earth.jpg" class="imgss" id="img2"/>
            <img src="images/shark.jpg" class="imgss" id="img3"/>
            <img src="images/polar.jpg" class="imgss" id="img4"/><br>
            <div id="imgbtn">
                <button id="btnPrev" class="btns"><<</button>
                <button id="btnNext" class="btns">>></button>
            </div>
        </div>
        <div id="text">
            <h3>PROJECT</h3>
            **********************************************************************************************
            **********************************************************************************************

        </div>
        <div id="cpyr">Copyright &copy; 2018</h1></div>
        </div>

    </div>
</body>

希望对您有所帮助。

Answer 2

您必须为 #container div 添加此规则

#container {
    position: relative;
}

PS: 你的 CSS 有点乱，我建议不要为每个子菜单重写相同的规则，你可以给它们a class 并写一次这些规则，在这里你添加另一个你错过了 z-index 属性的规则。

举个例子：对于每个子菜单 div，你给它一个 class，并为所有子菜单写一次规则，让你的 CSS 干净，浏览器满意。

.sub-menu {
    background: white;
    width: 15%;
    text-align: center;
    position: absolute;
    margin: 0px 0px 0px 4%;
    display: none;
    border-bottom: thin grey solid;
    border-right: thin white solid; 
    border-left: thin white solid;
    z-index: 100;
}

使用绝对位置时不显示下拉菜单

Dropdown Menu not Showing when absolute position is used

html

javascript

css

webpage