Internet Explorer 7 CSS菜單定位

Question

我在HTML和CSS中創建了一個適用於所有主流瀏覽器（Chrome，Firefox，IE8 +和Safari）的菜單。你可以在這裏找到它：發生在IE 7

http://www.calvaryccm.com/MenuTest.aspx

的問題我已經使用一些JS的效果懸停菜單。當我嘗試呈現在IE7這是發生了什麼：

我需要一些幫助搞清楚如何在文本下方位置的菜單。感謝您的幫助！

Answer 1

我不確定是否要在下面的選擇器中使用.block或.nav。我已經與.block，因爲我可以看到它被應用到元素。

• 對.block ul，刪除overflow: hidden。
• On .block li，add 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。

Answer 2

此外，您不需要使用javascript來添加'懸停'類，就像您所做的一樣。只需在CSS中使用:hover僞選擇器：

ul.nav > li:hover