Question

我有一个下拉菜单，其中包含以下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中进行测试

Answer 1

我想我已经找到了这个问题。我在包含菜单的div上使用了不透明度。由于某种原因，这导致z-index在子菜单上不起作用。我不知道为什么会这样。由于我删除了不透明度规则，它工作正常。

Answer 2

检查上面应该显示的元素的z-index。确保它们更低。还要确保父元素没有隐藏溢出。

Answer 3

设置父级的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;}

z-index无法在下拉菜单中使用

3 个答案: