Print

[Rashnu]

Ik heb voor mijn hoofdmenu een bepaald kleurenschema gemaakt (bv. tekst A, achtergrond B), dat bij eroverheen gaan met de muis geinverteerd wordt (tekst B, achtergrond A). Nu maak ik een submenu met een ander kleurenschema (bv. tekst C, achtergrond D), waarbij een item bij eroverheen gaan met de muis ook geinverteerd wordt (tekst D, achtergrond C). Op zich werkt dat wel.
Maar zodra ik met de muis over de parent heen ga, dan krijgen alle kinderen in het submenu (terwijl ze wel hun eigen achetrgrondkleur D houden) meteen ook tekstkleur B, wat ik ook probeer. Hoe krijg ik het voor elkaar dat die hun eigen tekstkleur C houden (althans, zolang ik er niet met de muis overheen ga) ?

[Frances]

Dit zou moeten werken:

Code: [Selecteer]

#navigatie li a {
color: #C00;
}
#navigatie li a:hover {
color: #F90;
}
#navigatie li li a {
color: #060;
}
#navigatie li li a:hover {
color: #36F;
}

[Rashnu]

Ja, dat werkt, dat had ik inmiddels ook al uitgevonden. Maar iets anders wat niet werkt is dat zodra ik met de muis over mijn submenu heen ga, dat dan de kleur van de tekst in het hoofdmenu weer terug verandert naar de oorspronkelijke kleur A, terwijl de achtergrondkleur nog steeds geinverteerd (A) blijft, waardoor de tekst dus niet meer zichtbaar is. Ik zou dan eerder verwachten dat de achtergrondkleur ook terug naar de oorspronkelijke kleur B zou gaan, maar niet slechts een van beiden. Ik zou willen dat ze beide geinverteerd blijven (d.w.z. kleur B op achtergrond A) zolang ik over een submenu heen muis, net zoals wanneer ik over het hoofdmenu muis.

Iets anders wat ik niet snap is dat ik het submenu een vreemde margin-right van -40 px moet geven om hem recht boven het hoofdmenu te krijgen. Zie bijlagen.

En hoe krijg ik het voor elkaar dat de tekst boven het naar boven uitklappende submenu ook echt erboven komt, en niet wordt afgedekt doro het submenu?

[Rashnu]

Toch iets te snel op verzenden gedrukt...
Inmiddels weet ik iets meer.
Het verschil zit hem in de vorm van de tweede kiezer uit het rijtje van vier dat jij noemt.
Als je #navigatie li:hover a neemt, zoals ik eerst had gedaan, dan krijg je het gedrag dat ik in de eerste post beschreef.
Als je echter #navigatie li a:hover (zoals jij voorstelt in de tweede post), dan krijg je weer het gedrag dat ik in de derde post beschrijf.
Geen van beide oplossingen doen precies wat ik wil.

Kun jij ook in woorden beschrijven wat beide kiezers nu exact om het lijf hebben. Want ik zie wel dat het effect ervan verschillend is, maar echt begrijpen doe ik het nog niet.