Z-index does not work in the dropdown menu

Question

I have a dropdown that 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 am using javascript to display a dropdown menu.

The problem is that the submenus are displayed below the slide show, which I have close to navigation. No matter how high or how low I set the z-index of the .sub menu, nothing changes.

Does anyone know what might make z-index not work at all?

Thank.

EDIT: problem with all browsers. Testing in Firefox, Chrome and Internet Explorer

Answer 1

, . div, . - , z-index . , . , .

Answer 2

z-index , . , . , .

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;}