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!