css - 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 比 #player-area 上的 z-index 高一个。