Dropdown menu disappears in IE7
- by Justine
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!
