IE filter gradient and positioning bug

Today I found a bug in the IE rendering engine that revolves around IE positioning and using filter’s to handle gradients. My issue was that I had a navigation component that contained a drop-down menu. These drop down menus weren’t showing up in IE for some reason. After many hours of debugging, I traced it back to a gradient I was using on the navigation element using IE’s filter definition.

caused the drop-down menus to not show up correctly. After moving them around and using some visibility magic, I found that the drop-downs were actually getting clipped inside the outer UL element. Once I removed the filter it all worked fine.

Hi Brian,
This issue has been a pain for me for a long while, typical designs I have to build, have to have gradients that can grow and or shrink with depending on the CMS output and such I have found drop down navigation the greatest problem when using background grads and filters.

I have tested the solutions above and z-index fix works well for ie9+ however, ie7 and ie8 still require the filter to be removed from the rule, and thus forcing me to fall back to a solid colour. Not ideal but at least its some progression, and its also nice to know im not the only one struggling with this.