Dropdown menu + slideshow in content z-index issue

Question

I'm having a problem where a slideshow (using jQuery Cycle) gets rendered in front of a dropdown menu in the navigation.

The weird thing is that everything works in Internet Explorer but in Firefox, Chrome and other decent browsers.

I suppose this has to do with z-index, but I'm not sure how to fix it.

You can view the code on http://jsfiddle.net/aEdAi/.

• Try hovering the third navigation menu item to see the dropdown menu.
• You can set class="hover" on the third <li> in the navigation using Firebug to visually ‘lock’ the hover state and debug.

How can I fix this? The dropdown menu always needs to be on top of the slideshow.

Answer 1

hi if you set your div intro-wrapper with

#intro-wrapper { height:390px; position:relative; z-index:0; }

it work...