z-index 不适用于下拉菜单
我有一个具有以下 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-menu 的 z-index 设置多高或多低，都不会发生任何变化。
有谁知道什么可能会触发 z-index 根本不起作用？
谢谢。
编辑：所有浏览器都有这个问题。在 Firefox、Chrome 和 Internet Explorer 中进行测试
I have a drop down menu which has the following html structure:
<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>
and I have the following css rules:
.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;}
I'm using javascript to show the drop down menu.
The issue I have is that the sub-menus are appearing below a slideshow which I have close to the navigation. No matter how high or how low I set the z-index of .sub-menu, nothing changes.
Does anyone know what could possibly trigger z-index to not work at all?
Thanks.
EDIT: The issue is with all browsers. Testing in Firefox, Chrome and Internet Explorer
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我想我已经找到问题了。我在包含菜单的 div 上使用了不透明度。由于某种原因，这导致 z-index 在子菜单上不起作用。我不知道这是为什么。现在我已经删除了不透明度规则，它工作得很好。
I think I have found the issue. I was using opacity on the div containing the menu. For some reason this caused z-index to not work on the sub-menu. I am not sure why this is. It works fine now that I've removed the opacity rule.
检查应该出现在上面的元素的
z-index。确保它们较低。还要确保父元素没有隐藏溢出。
Check the
z-indexof the elements it is supposed to appear above. make sure they are lower.Also make sure that the parent element hasn't got the overflow hidden.
设置父级的 Z-index，然后设置子级的 Z-index。
Set the Z-index of the parent and then set the Z-index of the child.