0

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!

Wayners247
  • 455
  • 9
  • 22
  • i can't seem to reproduce any bug on my IE8. Not really sure what is closing and not closing? more description pls? – Yman May 20 '11 at 10:43
  • Sorry. When you hover over the first option, 'Garden Furniture', it opens up the first tier of options. All garden furniture being the first option on the new tier. However WHen trying to click on any other option in that new tier the menu closes?! – Wayners247 May 20 '11 at 10:44
  • What kind of menu is it? jQuery (using .hover) or plain CSS menu (using :hover)? – Salman A May 20 '11 at 10:52
  • Plain CSS only! using csshover.htc as backup. – Wayners247 May 20 '11 at 11:06
  • Hmmm. Advance CSS support in IE7/8 is pretty lame. – Salman A May 20 '11 at 11:16
  • It is, most of the css used is pretty basic though! I have a seperate stylesheet with moz-border-radius use in specifically for the better browsers but have no implemented it yet as I want to get this working first! – Wayners247 May 20 '11 at 11:24

2 Answers2

1

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:

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thank you Thirtydot, good explanation there. I personally dont care much for IE7, however my employers do and they want it working. I will remove that metatag, I am unsure as to why thats even there! Instructions would be great thank you! – Wayners247 May 23 '11 at 11:10
0

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.

ajcw
  • 23,604
  • 6
  • 30
  • 47