Question

**this question is on bounty because the below answers did not solve the problem.

I am debugging a page in IE7 and have run into one problem. When you hover over a nav link, the dropdown falls below the slide below it. The dropdown ul is positioned absolutely with a z-index of 10 and the slider is positioned relative to its parent with a z-index of 1. Something within the #slider is causing the menu to fall behind it.

You can view it at vitaminjdesign.com/search

I used jquery to change the z-indexes of every child of #slider:

$(function() {
      $('.jFlowSlideContainer').css('z-index', '1');
        })
      $(function() {
          $('#jFlowSlide').css('z-index', '1');
        })
      $(function() {
          $('#slides').css('z-index', '1');
        })

Still, in IE7, the submenu sits behind the slider. Perhaps the problem is lying in the menu script?

Answer 1

The problem is with stacking contexts. Basically the #menu li elements on which you have set a z-index (to 9) are not in the same stacking context as the #slider element (on which you have set z-index to 1). A quick solution would be to set the z-index of your #header element to 2, however I’d recommend reading up on stacking contexts.