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

Question

I am trying to create a simple webpage using HTML/CSS/JS that has some dropdown menu when hovering on the nav_menu. When I use absolute position in div for dropdown menu, it is not popping up when hovering(It drops down when relative position is used but I want it to be absoute). I think the problem is in my css?

This is the body part of my HTML code (#subnav, #subnav1, #subnav2 and #subnav3 are the four dropdown menus):

 $(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

You just have to add z-index to #subnav, #subnav1, #subnav2, #subnav3 like this:

 $(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> 

Hope this will help you.

Answer 2

you have to add this rule for the #container div

#container {
    position: relative;
}

PS: Your CSS is a little bit messy, I suggest instead of rewriting the same rules for each sub menu, you could give them a class and write these rules once, and here you add another rule that you missed the z-index attribute.

Here's an example: For each sub menu div you give it a class, and write the rules one time for all the sub menus, and make your CSS clean and the browser happy.

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