Блок поверх других (z-index не работает)

[amdbodia]

Делаю выпадающее меню. Структура такая:

<div class="top_container">
<div class="menu">
   <ul class="nav_menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>ItemN</li>
   </ul>
</div>
<div class="mask">
</div>
</div>

<div class="main_container">
</div>

Мне надо, чтоб элементы из ul выводились поверх всего, в т.ч. и блока "main_container".
В таблице стилей у меня прописано

ul.nav_menu {
position: absolute;
overflow: visible;
disaply: block;
z-index: 1000;
}

.mask {
position: absolute;
disaply: block;
z-index: 500;
}

.main_container {
position: absolute;
disaply: block;
z-index: 2;
}

Проблема в том, что блок ul отображается всегда под блоком main_container. Над блоком mask он отображается только при установке z-index для mask меньше 2.

Как такое может быть?

[pompiduskus]

может поставь блоку main_container.index -2 а менюшкам уже ,0 / 1 /2

[amdbodia]

Выкладываю исходник. Всё удалил, остались только проблемные блоки и касающаяся их таблица стилей. Буду благодарен за помощь.

[pompiduskus]

Пардон не то написал :s