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

Question

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

Answer 1

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.

Answer 2

Check the z-index of 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.

Answer 3

Set the Z-index of the parent and then set the Z-index of the child.

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