Thema: Superfishmenü - Textfarbe submenue

Hi zusammen

Ich nutze das Superfishmenü mit dem Menü-Styl "Navbar" (horizontales Menü).

Mein Problem damit ist folgendes:

Das normale Menü ist auf einer dunklen Hintergrund und daher mit weisser Textschrift versehen. Menüpunkte welche darunter als zweite Textzeile erscheinen (Submenue) sollen aber schwarz sein, da bei diesen der Hintergrund weiss ist.

Dies klappt aber nicht, da ich immer nur die Farbe für das gesamte Menü ändern kann, oder ich finde in der superfish-CSS einfach nicht die richtige Zeile

Kann mir bei diesem Problem jemand weiterhelfen?

Zum besseren Verständnis habe ich noch einen Screenshot beigefügt & die entsprechende css.

PHP-Code:

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
    background:        #3A8B46;
    height:            2.5em;
    padding-bottom:    2.5em;
    position:        relative;
}
.sf-navbar li {
    background:        #3A8B46;
    position:        static;
}
.sf-navbar a {
    border-top:        none;
}
.sf-navbar li ul {
    width:            44em; /*IE6 soils itself without this*/
}
.sf-navbar li li {
    background:        #fff;
    position:        relative;
}
.sf-navbar li li ul {
    width:            13em;
}
.sf-navbar li li li {
    width:            100%;
}
.sf-navbar ul li {
    width:            auto;
    float:            left;
}
.sf-navbar a, .sf-navbar a:visited {
    border:            none;
}
.sf-navbar li.current {
    background:        #fff;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar li li.current,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
    background:        #55b265;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
ul.sf-navbar ul li:hover li,
ul.sf-navbar ul li.sfHover li,
.sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
    background:        transparent  /* background-color fuer submenue*/
}
ul.sf-navbar li li li:hover,
ul.sf-navbar li li li.sfHover,
.sf-navbar li li.current li.current,
.sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active {
    background:        #fff;
}
ul.sf-navbar .current ul,
ul.sf-navbar ul li:hover ul,
ul.sf-navbar ul li.sfHover ul {
    left:            0;
    top:            2.5em; /* match top ul list item height */
}
ul.sf-navbar .current ul ul {
    top:             -999em;
}

.sf-navbar li li.current > a {
    font-weight:    bold;
}

.sf-menu li .separator {
    border-left: none;
    border-top: none;
}

/*** point all arrows down ***/
/* point right for anchors in subs */
.sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
.sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; }
/* apply hovers to modern browsers */
.sf-navbar ul a:focus > .sf-sub-indicator,
.sf-navbar ul a:hover > .sf-sub-indicator,
.sf-navbar ul a:active > .sf-sub-indicator,
.sf-navbar ul li:hover > a > .sf-sub-indicator,
.sf-navbar ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/*** remove shadow on first submenu ***/
.sf-navbar > li > ul {
    background: transparent;
    padding: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
} 


Gruss Manuel



EDIT: Mir ist noch was anderes eingefallen, was ich gerne fragen würde: Wenn ich mehrmals F5 (aktualisieren) drücke, kommt es vor, dass sich die horizontalen Abstände zwischen den einzelnen Menüpunkten verändern. Weiss jemand wodurch dies geschehen kann?

Hast du einen Link zu deiner Site? Ich muss nachschauen, wie das Untermenü per CSS angesprochen wird, da ich selber noch nie damit gearbeitet habe. Und dann kann man mal der F5-Frage nachgehen. Aber so aus dem Bauch geht das nicht.


Axel

Hi zusammen

Erst einmal Danke für eure Antworten.

Ich habe die Seite leider nicht online, deswegen kann ich keinen Link posten. Sollte eine aktuelle Seite für nen Kollegen in Joomla umbauen und die momentane muss aber weiterhin am laufen sein (lange Geschichte, aber ich kann nicht beide Seiten gleichzeitig am laufen haben (entweder alt/neu)...

@schluup2002:
So wie ich das in deinem code sehe, wäre das aber die Einstellung für das gesamte Menü (ich will ja nur die Submenüs in einer anderen Farbe haben). Ausserdem benutze ich die navbar-css und dann wird wohl die normale superfish.css nicht mehr greifen... (ist aber nur ne Vermutung).

Superfish-Navbar siehe hier: Klick (Examples -> Navbar)

Ich habe das nun geschlagene 3 Stunden probiert. Kenne mich aber noch zu wenig mit css aus, und kriege das einfach nicht hin mit einer anderen Submenü-Farbe :(

Achja: die normale textfarbe kann ich übrigens auch nicht in der superfish-navbar.css angeben, da nimmt es mir die Auszeichnung, welche in der normalen template.css angegeben ist. Ist das vielleicht die Lösung? In der template.css die Subs hinzuzufügen (falls ja, welcher css-code wäre dann der richtige dort)?

Gruss und Danke für eure Hilfe

Manuel


EDIT: Jupiee, mein letzter Lösungsansatz hat hingehauen! Musste einfach einen weiteren li-Eintrag bei dem Menü einfügen (in der template.css) und schon funktioniert das Ding wie ich es wollte. Manchmal schon unglaublich, 2 Zeilen Text haben mich jetzt gute 4 Stunden gekostet... Aber naja, jeder fängt mal klein an (und man lernt ja bekanntlich aus solchen Dingen)!

@ time4mambo: Sobald ich die Seite online habe, werde ich mich bezüglich dem Aktualisierungsproblem nochmals hier im Forum melden (ist übrigens nicht nur bei F5, sondern der Fehler tritt auch dann ab und zu auf, wenn man normal am navigieren ist)!