Internet Explorer 7 CSS Menu positioning

问题

I have created a menu in HTML and CSS that works in all the major browsers (Chrome, Firefox, IE8+, and Safari). You can find it here: http://www.calvaryccm.com/MenuTest.aspx

The problem occurs in IE 7.

I have a hover menu using some JS for effect. When I try to render it in IE7 this is what happens:

I need some help figuring out how to position the menu under the text. Thank you for your help!

回答1:

I'm not sure whether you want to use .block or .nav in the selectors below. I've gone with .block because I can see it being applied to the element.

• On .block ul, remove overflow: hidden.
• On .block li, add position: relative.
• On .block ul.nav ul, add left: 0.

You now have the infamous IE6/7 z-index problem:

• To fix it in this case, on .block ul, add position: relative; z-index: 3.
• z-index: 3 to be one higher than the z-index on #player-area.

回答2:

Also, you don't need to use javascript to add the 'hover' class as you've done. Just use the :hover pseudo selector in CSS:

ul.nav > li:hover

来源：https://stackoverflow.com/questions/7449773/internet-explorer-7-css-menu-positioning