繁体   English   中英

z-index不适用于subDiv

[英]The z-index does not work for subDiv

我彼此之间有2个Div,内部div具有z-index:2,并且当鼠标悬停在Div子菜单上且主div具有z-index:1时会显示,但是当我将鼠标移到内部div的Submenu上时在主div下打开,该怎么办? 谢谢

 <div id="Menu" style="top:0px;left:121px;width:170px;display:inline-block;;position:absolute;z-index:1;"> <div onmouseover="stayedIn=true;document.getElementById('SubMenu').style.display = 'inline-block';" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="cursor:pointer;background-color:#10406e;height:20px;width:100%;color:white;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;"> &nbsp;&nbsp;SubMenu <div style="float:right;display:inline-block;margin-top:5px;margin-right:5px;"><img border="0" src="../../<?php if($_SERVER['HTTP_HOST']=='localhost') echo 'worldnewsmaster/';?>images/small_right_arrow.png"></div> </div> <div id="SubMenu" onmouseover="stayedIn=true;" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="top:0px;left:170px;width:120px;display:none;position:absolute;z-index:2;"> <div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;"> &nbsp;&nbsp;Submenu1 </div> <div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;"> &nbsp;&nbsp;Submenu2 </div> </div> <div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;"> &nbsp;&nbsp;1 </div> </div> <div id="Menu2" style="top:0px;left:291px;width:170px;display:inline-block;;position:absolute;z-index:1;"> <div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;"> &nbsp;&nbsp;1_2 </div> </div> 

您需要将z-index属性添加到子菜单文本div标签中,而不是使用“ id = menu”添加到div中,因为此div中还包含了已悬浮div的内容。

您的代码将是:

子菜单images / small_right_arrow.png“>子菜单1子菜单2 1

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM