CSS 3 Gradient Confines Nested List to Parent UL - html

Question

I have a horizontal unordered list which I'm using as a main menu, with a nested unorderd list which I'm using as a dropdown sub menu.
I'm using a CSS 3 Gradient on the Main Menu but it is causing the sub menu to be confined to the list in IE. What I mean is, if I increase the height of the list items I can see part of the sub menu but this obviously ins't an option.
I have heard about someone encountering this problem before and was wondering if anyone could help.
This is the HTML of the menu.
<div id="menu">
<div class="mainmenu">
<ul>
<li>
<a href='path'>Home</a>
</li>
<li>
<a href='path'>Country Garden</a>
</li>
<li>
<a href='path'>Inner City Garden</a>
</li>
<li>
<a href='path'>Winter Garden</a>
<ul>
<li>
<a href='path'>Featured Products</a>
</li>
<li>
<a href='path'>Best Sellers</a>
</li>
<li>
<a href='path'>Special Offers</a>
</li>
</ul>
</li>
<li>
<a href='path'>Water Garden</a>
</li>
<li>
<a href='path'>Window Box</a>
</li>
</ul>
</div>
</div>
This is the CSS that controls it.
.mainmenu{
clear: both;
height: 42px;
margin: 0;
width: 980px;
}
.mainmenu ul{
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.mainmenu li{
display: inline-block;
margin: 0;
padding: 0;
z-index:1000;
height: 42px;
position: relative;
}
.mainmenu li a{
display: inline-block;
height: 33px;
padding: 9px 25px 0;
}
.mainmenu ul ul{
float: left;
left: 0;
padding: 5px 0 10px 0;
position: absolute;
text-align: left;
top: 42px;
width: 200px;
z-index: 10000;
}
.mainmenu li li{
clear: both;
text-align: left;
height: 30px;
}
.mainmenu ul li ul{
display:none;
}
.mainmenu li ul li a {
height: auto;
padding: 2px 25px;
width: 150px;
}
.mainmenu li ul li a, .mainmenu li.over li a {
text-decoration: none !important;
}
.mainmenu li:hover ul, .mainmenu li.over ul {
display: block;
}
This is style that causes the problem in IE8.
.mainmenu li{
background-color: #25abec;
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
}
It's the final line that causes the problem. If I take it out it works but looks wrong. The problem is in IE and Opera but it works in Firefox, Google Chrome and Safari.

Answer 1

The IE filter can indeed cause various issues at times. My recommendation is to not put the filter on at all, letting IE8 just have the plain default background-color, and then perhaps using SVG to get the background for IE9.