Suckerfish Menu zweite und dritte ebene andere css Anweisungen

[d3x84]

Hi zusammen,
ich habe mir ein Suckerfish Menu gebastelt und habe dem ganzen einen Verlauf mit CSS reingebastelt...
ich möchte aber das nur der erste level also .mod_navigation li einen verlauf hat,
aber die weiteren "unter punkte" keinen verlauf haben...

wie kann ich in contao die unterpunkte ansprechen?
hab ausprobiert aber so wie ich das im quelltext stehen ja egal ob level 1 oder 2 alle menüpunkte mit li ohne die vergabe einer weiteren class...

edit:
wie bekomme ich es eigentlich hin das wenn ein level 3 untermenu ist, ein pfeil angezeigt wird?

[Nils Riel]

Das geht zum Beispiel so:

Frage 1
.mod_navigation li {background: url(deinverlauf.jpg);
.mod_navigation li li {background: none;}

Frage 2
.mod_navigation ul.level_3 li.submenu {background:url(deinpfeil.jpg)};

[d3x84]

hi
im aktuellen FF7 und im Chrome wird das Menü zwar korrekt angezeigt,
aber mit dem ie habe ich probleme...
scheinbar wird es im ie8 garnicht angezeigt (geneu wie die heise "2 way social buttons" und im
ie9 ist das menü zwar vorhanden aber es ist komplett weiss,
somit sieht man es vor meinem weißen hintergrund nicht...

Weis jemand wo der fehler liegt?

Hier meine CSS anweisungen:

.mod_navigation
{
    left:14px;
    position:absolute;
    overflow:visible;
    top:240px;
    z-index:999;
}

.mod_navigation p
{
    margin:0;
    padding:0;
}

.mod_navigation ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}

.mod_navigation a
{
    text-decoration:none;
    color:#ffffff;
}

.mod_navigation li
{
    width:226px;
    position:relative;
    float:left;
    padding-left:5px;
    border-right:1px solid #ffffff;
    font-size:14px;
    line-height:25px;
    font-weight:bold;
    color:#ffffff;
    border-bottom:1px solid #ffffff;
    border-left:1px solid #ffffff;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #dadada 3%, #6dbbbe 20%, #6dbbbe 90%, #dadada 97%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(3%,#dadada), color-stop(20%,#6dbbbe), color-stop(90%,#6dbbbe), color-stop(97%,#dadada), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#dadada 3%,#6dbbbe 20%,#6dbbbe 90%,#dadada 97%,#ffffff 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#dadada 3%,#6dbbbe 20%,#6dbbbe 90%,#dadada 97%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#dadada 3%,#6dbbbe 20%,#6dbbbe 90%,#dadada 97%,#ffffff 100%);
    background: linear-gradient(top,  #ffffff 0%,#dadada 3%,#6dbbbe 20%,#6dbbbe 90%,#dadada 97%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

.mod_navigation li ul
{
    bottom:0;
    left:-1px;
    position:absolute;
    display:none;
    top:26px;
}

.mod_navigation li ul ul
{
    left:232px;
    position:absolute;
    top:0;
}

.mod_navigation li:hover
{
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #dadada 3%, #999999 20%, #999999 90%, #dadada 97%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(3%,#dadada), color-stop(20%,#999999), color-stop(90%,#999999), color-stop(97%,#dadada), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#dadada 3%,#999999 20%,#999999 90%,#dadada 97%,#ffffff 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#dadada 3%,#999999 20%,#999999 90%,#dadada 97%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#dadada 3%,#999999 20%,#999999 90%,#dadada 97%,#ffffff 100%);
    background: linear-gradient(top,  #ffffff 0%,#dadada 3%,#999999 20%,#999999 90%,#dadada 97%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

.mod_navigation li:hover ul,
.mod_navigation li.sfHover ul
{
    display:block;
}

.mod_navigation ul li:hover ul ul,
.mod_navigation ul li.sfHover ul ul
{
    display:none;
}

.mod_navigation ul ul li:hover ul,
.mod_navigation ul ul li.sfHover ul
{
    display:block;
}

Javascript:

sfHover = function() {
var sfEls = document.getElementById("*header*").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new [[RegExp]](" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Eingebunden habe ich das JS im Header über:

<script type="text/javascript" src="plugins/sfHover.js"></script>

danke

[d3x84]

sieht so aus als könnte der gute "alte" ie css verläufe im stil FarbeA -> FarbeB darstellen aber komplexere sind wohl nicht drin hrhr