CODEWITHSUNDEEP
internet-explorer-8internet-explorer-7cssnavigation
Wayners247
Wayners247

Reputation: 455

Problem with CSS navigation menu in IE7/8

I have a menu here:

http://www.gardensandhomesdirect.co.uk/menutest

It works as it should in Chrome, FF and IE9.

However if you try it in IE7/8, the first menu, Garden Furniture, when you try to hover over any other option than All Garden Furniture the menu closes. This doesnt happen on any of the other menu categories.

Im at a loss as to why this is the case, it is likey right in front of me!

Any help is appreciated.

Thanks!

Upvotes: 0

Views: 2544

Answers (2)

thirtydot
thirtydot

Reputation: 228162

That menu doesn't work in IE9, IE8, or IE7.

It would work in both IE8 and IE9, but you're forcing those browsers into IE7 mode with this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

If you remove that, only IE7 will remain broken.

IE7 is broken because it has known bugs concerning z-index, see:

I will investigate and provide exact instructions on how to fix this in IE7 if:

Upvotes: 1

ajcw
ajcw

Reputation: 23804

The absolute position of all the sub-menus one of top of another is causing this confusion. The first sub menu of 'garden furniture' does not overlap any other submenu beneath it, which is why I think this is the only one that works.

Try setting increasingly higher z-index values for each submenu in .side_nav. If you can't add classes to do this, you can do it with jQuery.

Upvotes: 0

Related Questions