z-index not working on drop down menu

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

Solution 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.

Solution 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.

Comments

[devdavid]

Does this problem occur only in a specific browser?

[thirtydot]

Make a jsFiddle test case, or even better provide a live link to the afflicted page.

[Luke Vella]

The issue occurs in all browsers, I'll add this detail to the main post.

[Capagris]

if you solved your own issue, 'post your answer' independently and select is as the correct answer

[Luke Vella]

I tried that and it doesn't seem to work. Changing the z-index of .menu > li does have an effect on .menu > li but not on .sub-menu

[Robin Maben]

Also note, the z-index is applied for an element contained within one having relative positioning. As correctly shown above.

[DelPiero]

Wow, had to dig around a bit to find this. Been trying to solve this issue as well, thank you VERY much! How strange that specifying an opacity on the div containing the menu causes this problem...