Dropdown menu disappears in IE7

Question

Strange popup menu issue in IE7: http://screenr.com/SNM

The popup window disappears when the mouse moves to the part that hangs over the other layers.

The HTML structure is as follows:

<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 submenu is positioned absolutely and has visibility:hidden, then it is set to visibleusing jQuery, for example:

$(".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 a drop-down list under different content in IE7, which was easily fixed by specifying 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 it hangs over other divs, you can view the site here: http://dev.gentlecode.net/ama/ubezpieczenia.html

, - . , ...

!

Answer 1

, .

, , - "", :hover.

background-color:#HEX , IE7.

background-color:transparent, , , .

, .

, , , .

Answer 2

, "" div div "content". z-index .content .primary. , CSS, , .

, - :first-child IE, .

Answer 3

, CSS , . - CSS- -, , *:first-child+html .content .content, html, :first-child . html , , z-index: 1 !important; .

Answer 4

, , /. , /, ul. , , , IE7 .

, . .

, , . , .

.

Answer 5

IE7. ! , IE7 display: block. li, li. , 'a' css ul. ! , , . - , . [e-mail]