我正在尝试使用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 © 2018</h1></div>
</div>
</div>
</body>你只需要像这样将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 © 2018</h1></div>
</div>
</div>
</body>希望这会帮助你。
你必须为#container div添加这个规则
#container {
position: relative;
}
PS：你的CSS有点乱，我建议不要为每个子菜单重写相同的规则，你可以给他们一个类并写一次这些规则，在这里你添加另一个你错过了z-index属性的规则。
这是一个例子：对于每个子菜单div，你给它一个类，并为所有子菜单编写规则一次，并使你的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;
}