jquery - 下拉菜单在 IE7 中消失

Question

IE7 中下拉菜单的奇怪问题:http://screenr.com/SNM

当鼠标移动到悬停在其他图层上方的部分时，下拉菜单会消失。

HTML 结构如下所示:

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

子菜单是绝对定位的并且有 visibility:hidden，然后使用 jQuery 将其设置为 visible，如下所示:

$(".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');
});

我在 IE7 中隐藏在其他内容下的下拉菜单有问题，通过将 z-index 给它的父级和其他 div 很容易解决:

*: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;
}   

现在，我不知道为什么将鼠标悬停在其他 div 上时菜单会消失，您可以在此处实时查看该站点:http://dev.gentlecode.net/ama/ubezpieczenia.html

我很乐意得到任何帮助，我已经盯着这段代码看了很多年了，但没有任何解决方案。我想这只是我的隧道愿景......

在此先感谢您的帮助!

Answer 1

运气不好，我想我找到了解决方案。

我开始为下拉菜单中的不同元素添加背景颜色，以查看是否存在任何可能影响 :hover 状态的“漏洞”。

当我将 background-color:#HEX 添加到菜单中的二级链接时，一切都开始在 IE7 上运行。

然后我尝试使用 background-color:transparent 但不幸的是它不起作用。

最后，我尝试使用透明背景图像，确实有效。

因此解决方案是为下拉菜单中的二级链接添加纯色背景或透明背景图像。