z-index не работает в раскрывающемся меню

У меня есть раскрывающееся меню со следующей структурой 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 для отображения раскрывающегося меню.

У меня проблема в том, что подменю появляются под слайд-шоу, которое у меня близко к навигации. Независимо от того, насколько высоко или насколько низко я установил z-index для .sub-menu, ничего не изменится.

Кто-нибудь знает, что может привести к тому, что z-index может вообще не работать?

Спасибо.

EDIT : Проблема во всех браузерах. Тестирование в Firefox, Chrome и Internet Explorer