Z-Index Issue When Using Nivo Slider

HTML & CSS
1

LINK-
http://www.tocdocs.com/index.041613.php

The link above has a main menu navigation that includes sub menu items or dropdowns on some of the buttons. The dropdowns are covered up by the Nivo slider. Can someone tell me how to fix this? I have been toying around with z-index on what I think are the appropriate html items, but I cannot figure this one out.

Thanks in advance to anyone who can help!

Todd

2

Try something like this:

#header-container {
width: 100%;
height: 148px;
background: rgba(0, 0, 0, 0) url(../i/gfx_bkg_header.png) repeat-x top center;
position: relative;
z-index: [COLOR="#FF0000"]100[/COLOR];
clear: both;
}

The z-index need to go on the outermost container of the menu to ensure it sits above elements below that section.

3

I see. Your explanation helps me out. I was trying to apply the z-index to the header and the navigation items instead. Ugh. Thanks so much for continuing to show me where I have went wrong and teaching me the right way!

4

It was more because of Internet Exploder, but I learned around here with z-index issues to head straight to the outermost element in these situations. If you have z-index: 2 on the #header-container, it seems to nullify higher z-indices on inner elements. (I’m hazy on this stuff, because I’m way too lazy to read the specs.)