Problem mit CSS Menü: Hauptmenüpunkt behält Textfarbe nicht

**TheKidRocker** · 07.10.2010, 14:53

Hallo, habe ein CSS Problem...
und zwar habe ich ein CSS Menü mit 3 Leveln.
Das Problem ist das sobald ich mit dem Cursor vom Level 1 in Level 2 wechsel, zwar der Hintergrund bestehen bleibt, aber die Textfarbe wieder zurückgesetzt wird.
Das selbe Problem ist auch beim Wechsel von Level 2 auf Level 3.

Wie bekomme ich das hin?
Danke schonmal für eure Mühe

Hier ist ein Link zum Menü:
http://www.kh-hef.de/index.php/menuetest.html

Anbei ein Screenshot und hier ist der css Code
Der Text "Service" soll schwarz bleiben, wechselt aber zurück in Hellgrau.

Code:

/* Style sheet Suckerfish */
.mod_navigation
  {
     top:90px;
     height:300px;
     position:absolute;
     overflow:visible;
     z-index:999;

 }
 
.mod_navigation a
 {
     text-decoration: none;
     font-weight: bold;
     color:#DFDFDF;
     display:block;
     padding-left:10px;
     padding-right:10px;
 }
 
 .mod_navigation a:hover,
 .mod_navigation a.sfhover
 {
     text-decoration: none;
     font-weight: bold;
     color:#000000;
     display:block;
     padding-left:10px;
     padding-right:10px;
 }
  
.mod_navigation p
 {
     margin:0px;
     padding:0px;
 }
 
.mod_navigation ul
 {
     margin:0px;
     padding:0px;
     list-style-type:none;
 }
 
.mod_navigation li
 {
     /*width:150px; /* Breite eines Menüpunktes festlegen */ 
     position:relative; /* Position */
     float:left; /* links nebeneiander anordnen */
     background-color:#336799;  /*eine Hintergrundfarbe */
     border-right:1px solid #DFDFDF; /* optischer Rahmen */ 
     border-bottom:1px solid #cb0165; /* optischer Rahmen */ 
     border-left:1px solid #DFDFDF; /* optischer Rahmen */
     line-height:31px; /* bestimmt die Höhe eines Menüeintrages */
 }
 
.mod_navigation li ul ul
 {
     left:201px;
     top:0px;
     position:absolute;
 }
 
 /*Ausblenden der Ebenen*/
 
.mod_navigation li ul
 {
     bottom:0px;
     left:-1px;
     right:0px;
     top:32px;
     position:absolute;
     display:none; /* Ausbleden der Untermenüs */
 
 }
 
 /*Anzeige Unternavigationen*/
 .mod_navigation li:hover ul
 {
     display:block;
 }
 
 /*Blendet 3. Ebene aus*/
.mod_navigation ul li:hover ul ul
 {
     display:none;
 }
 
 
 /*Zeigt 3. Ebene an*/
.mod_navigation ul ul li:hover ul
 {
     display:block;
 }
 
 /*Ändert BG Farbe*/
 .mod_navigation li:hover,
 .mod_navigation li.sfhover
 {
    background-image:url("tl_files/webconsulting/menu.jpg");
    color:#000000;
    font-weight:bold;
 }
 
 /*Macht zweite Ebene breiter*/
.level_2 li
 {
     width:200px;
 }


/*Zur Zeit aktivierter Menüpunkt*/ 
.active span
 {
    background-image:url("tl_files/webconsulting/menu.jpg");
    color:#000000;
    font-weight:bold; 
    display:block;
    padding-left:10px;
    padding-right:10px;
 }

**psren** · 07.10.2010, 14:58

Der aktive Punkt ist in einem span und nicht in einem a-element

Uups Sorry, hatte die letzen zeilen deiner CSS übersehen

Ist auf deinem Screenshot gerade Kontakt aktiv?
Dann müsstest du noch a.trail die schwarze Schriftfarbe mitgeben.

**TheKidRocker** · 20.10.2010, 10:44

Zitat von psren

Der aktive Punkt ist in einem span und nicht in einem a-element

Uups Sorry, hatte die letzen zeilen deiner CSS übersehen

Ist auf deinem Screenshot gerade Kontakt aktiv?
Dann müsstest du noch a.trail die schwarze Schriftfarbe mitgeben.

Im Screenshot ist der Punkt Service mit dem Unterpunkt Kontakt aktiv.

Leider habe ich mit a.trail nichts hinbekommen

Kannst du vllt nochmal genauer sagen wie du es gemeint hast?

**Andreas** · 20.10.2010, 12:52

Entschuldigt bitte, aber immer wieder diese Fragen nach CSS-Problemen ohne Beispielseite und wenn man Glück hat darf man einen Blick auf einen Screenshot werfen. Und dann bekommt man CSS-Code präsentiert, durch den man sich liebenswürdigerweise durchwühlen soll.

Es ist doch schon mit Firebug oft knifflig genug ein spezielles Problem zu lösen. Und fast niemand versteht es sein Problem so zu Beschreiben, dass man es auch verstehen kann. Es folgt Post auf Post mit Nachfragen, was denn nun wirklich gewünscht wird. Und was bitte ist ein "CSS-Menü"?

Ein Forum muss ja nicht unnötigerweise zugeballert werden.

Alle die dies betrifft, schaut euch bitte noch mal diesen wichtigen Thread von Nina an. Wichtig: TIPP: Layout-/CSS-Fragen mit URL posten

Ich wünschte es gäbe hier ein Forum speziell für CSS-Probleme, wo in einem Sticky-Thread noch mal deutlich darauf hingewiesen wird, dass man eine Testseite anbieten soll.

Danke, dass ich mir mal Luft machen durfte.

Gruß Andreas

**TheKidRocker** · 25.10.2010, 14:49

Sorry, hätte auch einen Link bereitgestellt, aber habe das besagte Menü bisher nur in meiner lokalen Testumgebung laufen gehabt.
Außerdem habe ich gedacht es wäre nur eine Kleinigkeit... sorry

Habe es nun mit online integriert und stelle hier den Link bereit:
http://www.kh-hef.de/index.php/menuetest.html

**Andreas** · 25.10.2010, 23:21

Es liegt auf jeden Fall an dem .mod_navigation li:hover. Wenn du über ein LI in tieferer Ebene hoverst, hoverst du gleichzeitig auch über die übergeordneten LIs, da die tieferen LIs ja dort drin enthalten sind, auch wenn's im Firebug nicht direkt so aussieht.

Vergleiche mal mit meiner suckerfish aus meinem Thread hier im Forum, ich weiß, ist mitlerweile kaum noch zu finden. Deswegen hänge ich sie mal hier an.

suckerfish_h.css.txt

Ich musste die Datei in .txt ändern, da .css hier nicht erlaubt ist.

Benutze li:hover nur für das Aus- und Einblenden der Menüpunkte. Den hover-Status für das Design der Menüpunkte machst du dann über die A-Elemente. a:hover

Gruß

**TheKidRocker** · 28.10.2010, 08:37

Danke für deine Hilfe, leider komme ich auch damit nicht weiter.

Ist es denn überhaupt möglich?
Dein Menü hat ja soweit ich erkennen kann gar keine definierten Textfarben?

Bei den LI Elementen behält er ja die Farbe bei wie du schon erwähnt hast, weil sie ineinander verschachtelt sind.

Allerdings wird ja die Textfarbe über das A Element definiert und somit wohl auch nicht vererbt.

**Andreas** · 28.10.2010, 11:20

Ja, es ist nur das Grundgerüst, also alles, was man auf jeden Fall benötigt. Da ist aber ein Kommentar, der besagt, dass alle Formatierungen an diese Stelle sollen 'formating comes here'.

Code:

#suckerfish ul.level_1 a,
#suckerfish ul.level_1 span {
	display: block;
	width: 140px; /** * adjust value if you have padding and/or borders */
	font-size: 22px;
/** * formating comes here
	padding: _px;
	border: _px solid red;
        background: silver;
 */
}

Dort solltest du aufsetzen und auch deine hover-Statements deklarieren.

Gruß

**TheKidRocker** · 10.11.2010, 11:05

Hab leider auch mit diesem Tip keinen Fortschritt machen können...

Würde mich mittlerweile auch damit abfinden, wenn der Hintergrund im Level 1 einfach wieder blau wird wenn ich auf den 2. Level hovere.
Aber da fällt mir auch kein Lösungsweg ein und sämtliche Menüs die ich im Web finde, behalten die Farbe bei...

**Andreas** · 10.11.2010, 13:00

Du benutzt ja auch immer noch den LI:hover Status zum Formatieren. Du solltest doch den A:hover Status benutzen.

Code:

.mod_navigation a:hover, .mod_navigation a.sfhover {
  display: block;
  padding-right: 10px;
  padding-left: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  background-image: url("http://www.kh-hef.de/tl_files/webconsulting/menu.jpg");
}
.mod_navigation li:hover, .mod_navigation li.sfhover {
}

Lösche also den li:hover Selektor und packe die Eigenschaften in den a:hover Selektor.

Gruß

**TheKidRocker** · 11.11.2010, 07:20

Ok, jetzt habe ichs verstanden. Sorry, ich stand irgendwie auf der Leitung.
Ist nun aktualisiert auf der Seite.
Nun bekommt immer nur der aktuell ausgewählte Punkt die andere Schriftfarbe und den Hintergrund.
Die erst angedachte Lösung wäre zwar sicherlich die schönere Variante, aber so ist es erstmal ok.

Habe nun noch ein anderes Problem und zwar die Breite der ausklappspalten.
Ich kann den verschiedenen Leveln ja unterschiedliche Breiten zuweisen, habe ich auch gemacht.
Nur müsste die Spalte bei Innungen sehr breit sein, aber bei Service beispielsweise nur sehr schmal.

Habe allerdings noch nicht rausbekommen, wie ich den einzelnen Menüpunkten verschiedene Breiten zuweisen kann weil ja alle die Klasse "submenu" haben.

EDIT:
Das Problem hat sich gelöst, habe in der Seitenstruktur den Menüpunkten jeweils eine css klasse zugewiesen und durch diese die Breite zugewiesen.

Nun hätte ich noch ein anliegen:
Die Punkte in Level 2 klappen ja nun nach rechts auf (also sind nach rechts hin breiter), es wäre natürlich schön wenn man dden letzten Punkt nach links aufklappen könnte, so dass es nicht rechts übersteht. Ist das möglich?

**Andreas** · 11.11.2010, 10:49

Ja, das ist möglich, mach dich am besten mal hier schlau http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Aber ich vermute, dass deine Probleme damit nicht behoben sein werden. Das Problem ist, dass du irgendwie von Anfang an nicht das richtige suckerfish-Menü genommen hast
http://www.alistapart.com/articles/dropdowns/
bzw.
http://htmldog.com/articles/suckerfish/dropdowns/

Es ist so durchdacht, dass es in allen Browsern und Situationen funktioniert. Eine Abweichung davon kann Probleme nach sich ziehen.

Für TYPOlight hatte ich es mal extra aufbereitet, so dass man ein Grundgerüst hat, welches auf jeden Fall funktioniert. Von dort ausgehend kann man seine eigene Formatierung aufsetzen, jede Änderung muss aber überprüft werden. Hol dir mal die Zip-Datei von hier http://www.contao-community.de/showt...erfish-TinyMCE da ist zusätzlich zur suckerfish_h.css noch eine readme dabei.

Gruß

**TheKidRocker** · 11.11.2010, 14:20

Danke für die Links, habe gerade versucht dein Menü zu integrieren und bin schon auf erste Probleme gestoßen.

Das Menü hat ja "position: static;"

Mein Menü muss aber 90px von oben beginnen, hatte ich vorher über
top: 90px;
gelöst, dass funktioniert jedoch nur mit "position: absolute;" und wenn ich dies so setze, funktionieren die Dropdowns nicht mehr.
Es passiert gar nichts beim Hovern.

Übrigens hatte ich meine ursprüngliche Variante von hier abgeleitet:
http://dev.contao.org/wiki/1/TutorialsSuckerfish

**Andreas** · 11.11.2010, 15:26

Ok, dann hast du wenigsten eine Basis gehabt, auf die man sich verlassen können sollte.

position:absolute; würde ich nicht unbedingt benutzen, da du z.B. das Verhalten von Blocklevel-Elementen wie z.B. DIVs und ULs schonmal dahingehend verändertst, dass ihre Breite nicht mehr über den zur Verfügung stehenden Raum ausgebreitet wird. Durch 'absolute' wird ein Element ja aus dem Elementefluss heraus genommen.

Du kannst dem DIV ein margin-top:90px; geben. Oder, wenn du ein Element darüber hast, diesem Element height:90px; damit erreichst du das gleiche.

Bei solchen Anleitungen z.B. für Drop-Down-Menüs ist immer wichtig, dass der Autor keine überflüssigen Angaben dort rein setzt, damit man erkennen kann, was das Wesentliche ist, was man auf keinen Fall weg lassen darf. In meinem Menü habe ich das versucht, ob es mir gelungen ist weiß ich nicht. Dort vergebe ich z.B. auch den A-Elementen eine feste Breite. Ich meine das wäre auch für irgendetwas wichtig gewesen, ich glaube für dieses eine margin-left.

Evtl. könnte aber dieses ganze suckerfish mal überdacht werden, da wir heute ja keine Rücksicht mehr auf die älteren Browser wie z.B. IE6 nehmen müssen. Das ganze müsste also mittlerweile irgendwie einfacher gehen, da ja auch alle modernen Browser den hover-Status über allen Elementen erkennen. Mit display:inline-block; anstatt float:left;, oder display:inline; müsste man das heutzutage doch eigentlich recht einfach umsetzen können. Ich werde das beizeiten mal ausarbeiten.

Gruß

**TheKidRocker** · 08.12.2010, 08:55

So, ich habe mein Menü nun soweit fertig!
Bin nun so zufrieden wie es ist, allerdings tritt beim Internet Explorer immernoch ein Fehler auf, denn manchmal bleiben die Menüs auf Level 3 hängen bleiben (siehe Anlage).

Passiert nur beim IE, beim Firefox ist alles ok (wie so oft

).
Hat jemand eine Idee woran das liegt?

Hier die Testseite

**Andreas** · 08.12.2010, 11:08

Das müsste doch der Effekt sein, auf den ich unten in meiner suckerfish_h_readme.txt hinweise. Der Workaround in meiner suckerfish_h.css müsste dieses Problem beheben. Ich meine, dass ich da für den IE7 das Verstecken über display:none; anstatt mit left:-999em; löse.

Gruß

**TheKidRocker** · 08.12.2010, 13:04

Da ich ja deine CSS übernommen und erweitert habe, habe ich auch diesen Workaround mit drinne.

Code:

/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_1 li ul {
	display: none; /** * change to 'block' for testing */
}


/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_1 li:hover ul ul,
*:first-child+html #suckerfish ul.level_1 li.sfhover ul ul,
*:first-child+html #suckerfish ul.level_1 li:hover ul ul ul,
*:first-child+html #suckerfish ul.level_1 li.sfhover ul ul ul {
    display: none; /** * change to 'block' for testing */
}

Oder muss ich da noch irgendwas anpassen?
Mit display:block; geht noch weniger

**Andreas** · 08.12.2010, 16:05

Ne, display:block; ist ja nur zum Testen, dann müsstest du alles aufgeklappt sehen.

Kannst du die Seite mal zeigen? Weiß ich jetzt auch nicht, warum der IE7 da immer noch Probleme machen sollte.

**Andreas** · 08.12.2010, 16:34

Ok, du hattest den Link zu der Seite ja oben schon gepostet.

Ne, find ich jetzt auch nicht raus, woran das liegt. Mir ist nur aufgefallen, dass dein #header .inside nicht position:static; ist und dass die As und SPANs keine Breite haben.