Internet Explorer 7 CSS菜单定位

Question

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!

Answer 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 position: relative; z-index: 3 .
• z-index: 3 to be one higher than the z-index on #player-area .

Answer 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