Internet Explorer 7 CSS菜单定位

Question

我创建了一个HTML和CSS菜单，适用于所有主流浏览器（Chrome，Firefox，IE8 +和Safari）。您可以在此处找到它：http://www.calvaryccm.com/MenuTest.aspx

IE 7中出现问题。

我有一个使用一些JS效果的悬停菜单。当我尝试在IE7中渲染它时会发生这种情况：

我需要一些帮助来弄清楚如何在菜单下定位菜单。谢谢你的帮助！

Answer 1

我不确定您是否要在下面的选择器中使用.block或.nav。我和.block一起去了，因为我可以看到它被应用到元素。

• 点击.block ul，删除overflow: hidden。
• 在.block li上，添加position: relative。
• 在.block ul.nav ul上，添加left: 0。

您现在拥有infamous IE6/7 z-index problem：

• 要解决此问题，请在.block ul上添加position: relative; z-index: 3。
• z-index: 3比z-index上的#player-area高一个。

Answer 2

此外，您不需要像使用javascript那样添加“悬停”类。只需在CSS中使用:hover伪选择器：

ul.nav > li:hover