Html z索引在下拉菜单上不起作用

我有一个下拉菜单，具有以下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> 

我正在使用javascript显示下拉菜单

我的问题是，子菜单出现在靠近导航的幻灯片下方。无论我将.sub菜单的z索引设置得多高或多低，都不会发生任何变化

有人知道什么可能会触发z-index根本不起作用吗

谢谢

---

编辑：问题在于所有浏览器。在Firefox、Chrome和Internet Explorer中进行测试

设置父级的Z索引，然后设置子级的Z索引

.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}

---

检查它应该出现在上面的元素的

z-index

。确保它们是低的。

---

还要确保父元素没有隐藏溢出。

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

这个问题只发生在特定的浏览器中吗？制作一个测试用例，或者更好地提供一个到受影响页面的实时链接。这个问题出现在所有浏览器中，我会将此详细信息添加到主帖子中。如果您解决了自己的问题，“独立发布你的答案”并选择“是”作为正确答案我试过了，但似乎不起作用。更改.menu>li的z索引确实会影响.menu>li，但不会影响.sub MENUA。此外，请注意，

z索引

适用于包含在具有

相对定位的元素中的元素。正如上面正确显示的。哇，我不得不四处挖掘才能找到这个。我也一直在努力解决这个问题，非常感谢！奇怪的是，在包含菜单的div上指定不透明度会导致此问题。。。
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}