Dropdown menu disappears in IE7

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 h开发者_如何学Pythonelp!

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 state.

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.

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.

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.

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.

I had a similar issue using IE7. I finally fixed! My problem was the the fact the IE7 has a problem with display:block. So my link was not in all li but just at the actually text inside the li. I fixed that putting a width at the 'a' in the css with the same size of the ul. Now, it's working! I am so happy that I am looking back every page I was looking the answer for and trying to help people out. if anyone want a better explain, just send me a e-mail. humberto@homemdeasas.com

h!