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但不幸的是，这不起作用。

最后，我尝试使用透明的背景图像并且可以正常工作。

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

Answer 2

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

此外，:first-child伪类在IE中运行不佳，因此可能是您的错误的真正来源。

Answer 3

我不确定您的CSS选择器是否正在选择您的意图。除非您使用的是某些我不知道的CSS黑客攻击，否则*:first-child+html .content会选择所有.content个元素，这些元素是与{{1}相邻的html元素的后代任何其他元素。 :first-child元素不应与任何其他元素相邻，因此我认为html声明未应用于任何内容。

Answer 4

我认为它会消失，因为你有一个保证金/空间设置。所以当你的鼠标悬停在那个边缘/空间时，你在技术上并没有盘旋在ul上。我知道，这很奇怪，并没有多大意义，但IE7就是这样的傻瓜。

要修复它，您需要删除顶部/底部边距。用填充物替换它们。

它发生在我身上一次，但我通过删除所有边距并用填充替换来修复它。不确定这在这种情况下是否有帮助。

祝你好运。

Answer 5

我使用IE7时有类似的问题。我终于修好了！我的问题是IE7有display：block的问题。所以我的链接不在li中，而只在li内的实际文本中。我修正了将宽度放在css中的'a'处，其宽度与 ul相同。现在，它正在运作！我很高兴我回顾每一页我正在寻找答案并试图帮助别人。如果有人想要更好的解释，只需给我发电子邮件。 humberto@homemdeasas.com

ħ！

下拉菜单在IE7中消失

5 个答案: