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.