Aloha
Zunächst: In deinem HTML-Quelltext fehlen noch alle wichtigen Elemente (Radio-Buttons, labels, a-Elemente). In meiner Antwort nehme ich an allen Punkten jetzt einfach mal an, du hättest alle diese Elemente schon verbaut.
Das ist richtig, habe alles gelöscht, was erstmal nichts mit der Einfärbung des Hintergrunds zu tun hat... dachte ich zumindest :)
Ehrlich, wenn man zu lange vor einem Problem hockt, den Code anstarrt, auf daß er seine Geheimnisse endlich enthüllt, das wissen, was man machen muss, damit er wiederrum macht, was man von ihm will...
Ein paar Stunden Abstand ist manchmal echt gut... und dann noch hilfreiche, ähm, Hilfe von dir...
Eigentlich ganz einfach ;) Überleg dir, was gehovert / formatiert werden soll.
Nun... mir war beim Anblick meiner Seite im Browser klar, was gefärbt werden soll, aber beim Anblick des Codes nicht, was ich dafür eigentlich zum färben vorsehen soll...
Für die gesamte Formatierung, die deinen Menüpunkt nachher ausmachen soll (also auch für das hovern) ist nicht das li zuständig - sondern das a. Deshalb ist auch in meinem Beispiel nirgends ein li mitformatiert, die Formatierung läuft immer über das a (das label mal ausgenommen). Du musst also soetwas notieren:
Darauf bin ich sogar auch gekommen, gegen Ende meines starrens, kurz bevor ich die Nachricht hier gechrieben habe und erstmal den Computer ausgemacht habe... deshalb auch mein Versuch <span> einzufügen und mit diesen dann die Farbe reinzubringen... natürlich hätte ich auch auf die Idee kommen können, die <label> selbst zu formatieren... ;-)
.untermenue2eintrag:hover>a { ... }
Oder, wenn das label mit angepasst werden soll:
.untermenue2eintrag:hover>a, .untermenue2eintrag:hover>label { ... }
Mein Denkfehler war, bzw. Problem, dass es ja durchaus auch Listeneinträge gibt, die selbst kein <a...></a> enthalten, deshalb habe die <a>-Elemente von beginn an nicht berücksichtigt.
Erst habe ich es auch mit den <label>-Elementen versucht, aber die umfassen ja unformatiert nur den reinen Inhalt und sind nicht so breit die gesamte Zeile, deshalb hat sich hier auch nie die gesamte Zeile verfärbt... der Gedanke, das <label>-Element auf die gesamte Zeilenbreite zu formatieren, kam ich ja nicht... Tunnelblick ;)
Warum <span> - du hast doch schon <a> oder <label>? ^^
Jaaa... siehe oben... auf die Idee kam ich heute morgen nicht... dass da auch formatierbare Elemente sind... :D
Aber nachdem ich mit deinen Tipps nun die <label>s generell auf 100 % gesetzt habe:
nav label {
width: 100%;
display:inline-block;
}
lassen die sich jetzt auch einfärben, wenn die Maus darüber ist (und eben auch nur dann):
#karriere > label:hover { /* Die erste Menüebene */
background: #ff0000;
}
.untermenue1eintrag > label:hover { /* Die zweite Menüebene */
background: #ffff44;
}
.untermenue2eintrag > label:hover { /* Die dritte Menüebene */
background: #aaff44;
}
funktioniert jetzt alles so wie es mir vorschwebt.
:)
Dankeschön!
So, dann mach ich mich jetzt mal ans Werk mit der Fertigstellung meiner Variante deines Menüs.
:)
MfG,
JPL