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

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在子菜单上不起作用.我不知道为什么会这样.我已经删除了不透明度规则,它工作正常.