CSS-Menü Farbverlauf in IE 9/10 nicht wie im im Firefox

[aherzog]

Hallo miteinander.

Ich habe aus dem Internet ein fertiges CSS-Menü geholt und dieses nach meinen Bedürfnissen angepasst.
Da ja der IE 9 und auch 10 keine CSS-Farbverläufe darstellen kann, habe ich mir das *Tool ?" css3pie heruntergeladen.
Damit kann ich die Verläufe darstellen.

Soweit so gut.
Wenn ich nun den Farbverlauf für den einzelnen Menüpunkt erstelle (#cssmenu a) wird dieser Farbverlauf auch für die Untermenüs übernommen, was ich aber nicht möchte.
In den 3 gängigsten Browsern (Firefox / Safari / Opera) stimmts genau so, wie ich es mir vorstelle.
Ich blicke nun nicht mehr durch was ich noch probieren könnte.
Könnt ihr mir helfen ? ?
Link zum Testen: http://neu.f1statistik.ch

Dann habe ich noch ein weiteres Problem.
Im Firefox ist beim überfahren eines Menüpunkts ein rotes Dreieck unten im Menüpunkt zu sehen.
Das sehe ich im IE 9/10 nicht.
Weiss jemand warum?
Der CSS-Code ist hier zu finden (#cssmenu > ul > li:hover:after)

CSS-Code:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu { /* ganze Menüleiste */
  height: 49px;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 3px solid #ff0000;
  -pie-background: linear-gradient(#32323a, #141414);
  behavior: url(../css3pie/PIE.htc);
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a { /* einzelner Mneüpunkt */
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  -pie-background: linear-gradient(#32323a, #141414);
  behavior: url(../css3pie/PIE.htc);
  display: inline-block;
  border-right: 2px solid #000000;
  color: #ffffff; /* Schrift*/
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display:compact;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ff0000; /* Farbe Pfeil */
  margin-left: -10px;
}
#cssmenu > ul > li:hover > a { /* Maus über dem Menü */
  background: -moz-linear-gradient(top, #ff0000 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff0000), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #ff0000 0%, #070707 100%);
  background: -o-linear-gradient(top, #ff0000 0%, #070707 100%);
  background: -ms-linear-gradient(top, #ff0000 0%, #070707 100%);
  background: linear-gradient(to bottom, #ff0000 0%, #070707 100%);
  -pie-background: linear-gradient(#ff0000, #070707);
  behavior: url(../css3pie/PIE.htc);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #ff0000;
  border-bottom: 1px solid #000000;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #cc0000;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #ff0000;
  border-bottom: 1px solid #000000;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #cc0000;
}

HTML des Menüs:

<div id='cssmenu'>
    <ul>
       <li><a href='#'><span>Menü 1</span></a></li>
       <li class='has-sub '><a href='#'><span>Untermenü</span></a>
          <ul>
             <li class='has-sub '><a href='#'><span>Unter 1</span></a>
                <ul>
                   <li><a href='#'><span>Sub Menü 1</span></a></li>
                   <li><a href='#'><span>Sub Menü 1</span></a></li>
                </ul>
             </li>
             <li class='has-sub '><a href='#'><span>Unter 2</span></a>
                <ul>
                   <li><a href='#'><span>Sub Menü 2</span></a></li>
                   <li><a href='#'><span>Sub Menü 2</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>Menü 3</span></a></li>
       <li><a href='#'><span>Menü 4</span></a></li>
    </ul>
    </div>

Gruss und Danke für die Hilfe
Andy

 

[aherzog]

Ich habe gerade erfahren, das der IE10 doch Farbverläufe kann. Da ich noch den IE9 installiert habe, hab ichs nicht gesehen )
Für den IE9 brauchts speziele Filterangaben. Damit sind dann aber auch nur horzontale und vertikale Verläufe möglich.

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ffffff', endColorstr='#000000');

Hab jetzt also das css3pie-"Tool" entfernt und nun passts auch im IE wenn bis jetzt auch nur im IE10.