下拉菜单在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 我需要任何帮助，在没有任何解决方案的情况下已经盯着这段代码很久了。我想这只是我已经有了隧道视野...

提前感谢您的任何帮助！

- Justine

---

你在 *:first-child+html .primary 后面缺少了一个逗号，不确定这是否有影响。 - Amit

Answer 1

我想我通过运气找到了解决方案。

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

当我向菜单中的第二级链接添加 background-color:#HEX 时，IE7 上的所有内容都开始正常工作。

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

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

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

- Brett DeWoody

Answer 2

我认为问题出现在“内容(content)”div内的“主要(primary)”div中。尝试在.content .primary上设置一个较低的z-index值。老实说，绝对定位很少是实现CSS布局的最佳方式，而更灵活的布局可能会有自己的问题，但它不会是这些问题。

此外，:first-child 伪类在IE中的功能并不是很好，所以这可能是您的错误的真正来源。

- HaleFx

---

只有飞出菜单是绝对定位的，其余的 div 都有相对位置，因此我可以在它们上面使用 z-index 来修复菜单隐藏在它们下面的问题。如您在主帖中所见，.content .primary 的 z-index 很低。问题出现在当您将鼠标悬停在飞出菜单正好到达 .header 结束的地方时，因此我认为 z-index 可能是问题的根源，只是我无法弄清楚如何解决。 - Justine

Answer 3

我不确定你的CSS选择器是否选择了你想要的内容。除非你使用了一些CSS hack或者其他我不知道的东西，*:first-child+html .content会选择所有的.content元素，这些元素是属于一个html元素的后代，而这个html元素是任何其他元素的:first-child相邻的。html元素不应该与任何其他元素相邻，所以我认为z-index: 1 !important;声明没有被应用到任何东西上。

- HaleFx

Answer 4

我曾经在使用IE7时遇到了类似的问题。最终我解决了！我的问题是IE7在display:block上存在问题。因此，我的链接不在所有的li中，而只在li内部的实际文本中。我通过在CSS中为'a'设置与ul相同大小的宽度来解决这个问题。现在，它可以正常工作了！我很高兴，我正在回顾我寻找答案并试图帮助人们的每一页。如果有人想要更好的解释，请给我发送电子邮件[e-mail]。

嗨！

- Humberto Matias

Answer 5

我觉得它消失是因为你设置了一个边距/间隔。所以当你的鼠标悬停在那个边距/间隔上时，实际上并没有悬停在 ul 上面。我知道，这很奇怪，听起来不太合理，但 IE7 就是这么愚蠢。

要解决这个问题，你需要移除顶部/底部边距，并用内边距替换它们。

我之前也遇到过类似的情况，但是通过移除所有边距并替换为内边距来解决了。不确定这在这种场景下是否有效。

祝你好运。

- Amit