0

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:

IE 7 Menu Error

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

Courtney Stephenson
  • 912
  • 2
  • 18
  • 43

2 Answers2

2

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.
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

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
Jonathan Wilson
  • 4,138
  • 1
  • 24
  • 36