使用絕對位置時，下拉菜單不顯示
[英]Dropdown Menu not Showing when absolute position is used
問題描述
我正在嘗試使用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>
2 個解決方案
解決方案1
3 已采納 2018-03-01 13:14:35
您只需像這樣將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>
希望這會幫助你。
解決方案2
1 2018-03-01 13:30:15
您必須為#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;
}
當下拉菜單的位置絕對時，如何居中放置下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.