Dropdown menu disappears in IE7

Question

A weird problem with a dropdown menu in IE7: http://screenr.com/SNM

The dropdown disappears when the mouse moves to a part that hovers above other layers.

The HTML structure looks like this:

<div class="header">
<ul class="nav>
    <li><a href="">item</a>
    <ul><li><a href="">sub-item</a></li></ul>
    </li>
</ul>
</div><!-- /header-->
<div class="featured"></div>
<div class="content"></div>

The sub-menu is positioned absolutely and has visibility:hidden, then it's set to visible using jQuery, like so:

$(".header ul.nav li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

I had a problem with the dropdown hiding under other content in IE7, fixed easily by giving the z-index to its parent and other divs:

*:first-child+html .header {
    position: relative;
    z-index: 2 !important;
}

*:first-child+html .content, 
*:first-child+html .main,
*:first-child+html .primary
*:first-child+html .featured {
    position: relative;
    z-index: 1 !important;
}   

Now, I have no idea why the menu disappears when hovered over other divs, you can view the site live here: http://dev.gentlecode.net/ama/ubezpieczenia.html

I would love any help, been staring at this code for ages now without any solution. I guess it's just me tunnel visioning already...

Thanks in advance for any help!

Answer 1

I think the problem is in the "primary" div within the "content" div. Try setting a low z-index value on .content .primary. Honestly, absolute positioning is rarely the best way to achieve a CSS layout like this, and while a more flexible layout could have its own problems, it wouldn't be these problems.

Also, the :first-child pseudo-class doesn't function very well in IE, so that could be the real source of your bug.

Answer 2

I'm not sure your CSS selectors are selecting what you intended. Unless you're using some CSS hack or something of which I am not aware, *:first-child+html .content would select all .content elements which are descendants of an html element that is adjacent to the :first-child of any other element. The html element should not be adjacent to any other elements, so I think the z-index: 1 !important; declaration is not being applied to anything.

Answer 3

@Justine - Did you ever get a solution for this problem? If so, please post. I'm suffering from a similar issue here: http://bit.ly/9ZFJk5

Answer 4

Through dumb luck I think I figured out the solution.

I started adding background colors to different elements in the drop-down menu to see if there were any 'holes' that might be effecting the :hover status.

When I added a background-color:#HEX to the 2nd-level links in the menu everything started working on IE7.

I then tried using background-color:transparent but that unfortunately doesn't work.

Finally I tried it with a transparent background-image and that DOES work.

So the solution is to either add a solid background-color, or a transparent background-image to the 2nd level links in your drop-down menu.

Answer 5

I think it disappears because you have a margin / space set. So when your mouse is hovering that margin/space, you're technically not hovering over the ul. I know, it's weird, and doesn't quite make sense, but IE7 is stupid like that.

To fix it, you need to remove top/bottom margins. Replace them with padding.

It happened to me once, but I fixed it by removing all margins and replacing with padding. Not sure if that will help in this scenario.

Good luck.