using filter css property ruins the layout on IE

wanted to have a gradient BG for my menu without having to use a background image

IE "开发者_开发百科support" gradients via it's filter property

open the following jsbin example on IE to view and play with it http://jsbin.com/ijudu4/9/edit in IE7 the list can't break from it's container.

on IE8 it is working, but when you add z-index to the container(to solve other IE7 issues)

the list is also not visible

my "solution" for now is just using a background image, will be happy to find a better one

I'd like to recommend using CSS3Pie instead of filter to get IE to do gradients (and border radius).

CSS3Pie is a very clever little hack for IE which allows you to use a more standards-compliant method for setting these properties.

Hope that helps.