Drop down menu doesn't work in IE9

Question

http://www.streetstyles4all.co.uk/test4.html

Can anyone please advise. I have finished my menu now and it works in most browsers apart from IE9. The menu itself works but the drop down doesn't. The GENERAL and SHOP menu items should drop down and reveal many other sub menu items. Just not in IE9 :-(

Can anyone help?

The page in question is http://www.streetstyles4all.co.uk/test4.html

Answer 1

If you remove the filter property from the following rules:

#menu
#menu li:hover

then the display is fixed for IE9.

https://stackoverflow.com/a/6901105/637889 explains that you should probably be using -ms-filter for IE8+ (although clearly filter is still supported in IE9 as the gradient is working). Also see http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx for the newer syntax (as property values need quoting).

As an alternative you may want to explore the answers on IE9 Gradient using -ms for a more cross browser gradient solution, if you have not already seen it.

Lastly, may I also recommend Paul Irish's approach using Conditional Comments to including CSS rules for problematic (i.e. IE) browsers without cluttering the less problematic browsers.

Answer 2

i remove in your css stylesheet z-index two think

1.  #menu li:hover (Remove z-index this )

2. #menu (remove z-index this )

---

#menu li:hover {
    z-index: 5;}

#menu {
    z-index: 11;
}

and now check to Your layout in IE