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 开发者_StackOverflow社区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!

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:

• div layering problems
• Why is my CSS drop-down menu opening behind a DIV in IE7?
• IE 6 & IE 7 Z-Index Problem

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

• You're sure you care about IE7.
• You need the exact instructions.

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.