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.