1

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.

4

1 回答 1

0

IEfilter有时确实会导致各种问题。我的建议是根本不打开过滤器，让 IE8 只使用普通的 default background-color，然后也许使用 SVG 来获取 IE9 的背景。

于 2012-05-02T13:46:02.410 回答