Elements with higher z-index are still positioned below elements with lower z-indices

Question

I am having a stupid issue with a Joomla Menu Module called Maxi Menu. Here is a screenshot:

Link to website

The problem seems to be caused because of z-index. I have checked using firebug, but haven't been able to found out how the lower menu is finding its way to show up on top.

The interesting fact is that after a menu item is hovered, its z-index is changed to 15000 higher than any other menuitem on the page.

How is it still going under the other menu items with 12000 and similar z-indices?

Firbug display of the z-indices:

Answer 1

Add position:relative to the two divs that have z-index 10 and 20.

Z-indexing is calculated relative from the first parent that has a non static position (absolute, relative, fixed).

Answer 2

You have to add a higher z-index to the parent ul element too, so if you have :

<ul class="menu banner_menu maximenuck" style="">
 <li class="maximenuck item184 parent first level1 " style="z-index : 12000;......

...then this will fix it

.menu.banner_menu.maximenuck {
 z-index: 15000;
}