Html CSS 3渐变将嵌套列表限制为父UL

我有一个水平无序列表，用作主菜单，还有一个嵌套无序列表，用作下拉子菜单。 我在主菜单上使用了CSS 3渐变，但这会导致子菜单被限制在IE中的列表中。我的意思是，如果我增加列表项的高度，我可以看到子菜单的一部分，但这显然不是一个选项

我以前听说有人遇到过这个问题，不知道是否有人能帮忙。 这是菜单的HTML

    <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>

这就是导致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);
        }

这是导致问题的最后一行。如果我把它拿出来，它会工作，但看起来不对。问题出在IE和Opera上，但它在Firefox、Google Chrome和Safari上都能正常工作。

IE过滤器有时确实会导致各种问题。我的建议是根本不要使用过滤器，让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);
        }