[英]z-index not working on drop down menu
我有一个下拉菜单,其中包含以下html结构:
<ul class="menu">
<li><a href="">Menu Item 1</a>
<ul class="sub-menu">
<li><a href="">Sub Menu Item 1</a></li>
</ul>
</li>
</ul>
我有以下css规则:
.menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
我正在使用javascript来显示下拉菜单。
我遇到的问题是子菜单出现在我靠近导航的幻灯片下面。 无论我设置.sub菜单的z-index有多高或多低,都没有变化。
有谁知道什么可能触发z-index根本不起作用?
谢谢。
编辑:问题出在所有浏览器上。 在Firefox,Chrome和Internet Explorer中进行测试
我想我已经找到了这个问题。 我在包含菜单的div上使用了不透明度。 由于某种原因,这导致z-index在子菜单上不起作用。 我不知道为什么会这样。 我已经删除了不透明度规则,它工作正常。
检查它应该出现在上面的元素的z-index
。 确保它们更低。 还要确保父元素没有隐藏溢出。
设置父级的Z-index,然后设置子级的Z-index。
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.