jQuery banner and Dropdown menu problem

Question

Hi I have a problem with jQuery banner and dropdown menu. The dropdown menu is behind the jQuery banner slider. Look for a sample here

I tried z-index and position:absolute but I couldn't fix it.

Answer 1

tested in ie... you do have a problem, but it can be solved with the z-index property as shernshiou said. you should put this in a css file :

#slider{
    z-index : -1;
}

UPDATE
In ie <= 8, you have to set the z-index for the submenu too (although it should be 0 by default), so, either add a class to every submenu which sets the z-index attribute higher than the slider's z-index , or you can do it dynamic with jquery :

var newZIndex = ($('#slider').css('z-index') || 0) + 10;
$('div[id^=menu_child]').css('z-index',newZIndex);

Answer 2

Since i can only verify that in IE, Chrome and Firefox are showing it just fine, we should assume it is the famous IE Z-Index bug.

This can be fixed by giving the parent, that is on the same level (meaning: has the same parent) as the Banner-header a higher z-index than the banner.

In your case that would be the <tr></tr> where the navigation is nested

The reason for that is that Internet Explorer considers every nest of elements a new stacking context, which is considered more important than global z-index. This leads to elements on the same nesting level having a) a global z-index and b) a relative z-index.

An element one level below can have a global z-index of 5000, but since it is nested one level below it's parent, it will always be considered below his parents siblings.

Answer 3

I have no problem viewing that on Google Chrome.

Maybe u can try

z-index: -1

for those you wanna put at the background.