**this q开发者_Go百科uestion 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?
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.
Try giving the ul Or the li height:auto. It's hard to tell without seeing the code.
You seem to have several problems. I took out everything between <div id='slider'> ... </div>
and filled it with dummy text, so i could see if the menu was going over or under. It was still going under. I had a look at the rules in style.css for #slider, and removed the position: rule, to get the following:
#slider {
Z-INDEX: 1 !important; FLOAT: left; WIDTH: 960px; HEIGHT: 296px;
}
And that seemed to make it work. Then I added the slider content back in, and it was broken again. =\
position:relative;
float:left;
height:296px;
z-index:1!important;
to z-index exists the position needs to be "absolute" and the display "block"
position:absolute;
display:block;
z-index:1!important;
greetings
精彩评论