IE9 Dropdown menu - Filter bug

Question

I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.

I am referring to the main navigation bar at the top:

http://gratefulglass.viussandbox.co/

I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.

Any suggestions would be greatly appreciated.

Answer 1

The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.