CSS Kind-Selektoren

Hallo,

ich versuche mich gerade daran ein menü auf basis einer liste zu erstellen und scheitere leider an den css selektoren. Nachfolgend der html-code, den ich zum testen nehme:

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Mein Problem: ich möchte per css die listen elemente der ersten ebene ansteuern, später sicher auch die nachfolgenden ebenen.

wie ich auf zB https://www.mediaevent.de/css/css-selektor-kontextselektor.html gelesen habe, sollte

ul > li {
color: green;
}

die erste menü-ebene anwählen. also alle li-elemente, die direkt im ul-element mit der klasse ".menu" liegen. wählt aber leider alle li aus.

nav > ul.menu:first-child {
color: red;
}

oder

ul.menu:first-child {
color: red;
}

wählt auch alle li-elemente aus.

Ich freue mich, wenn mir jemand auf die Sprünge helfen kann, vielen Dank!

 

Okay, die Selektoren sind wohl von der Sache her richtig. Ich verstehe jetzt, dass die folgenden ebenen mit gefärbt werden, weil sie inhalt eines listen-elements der ersten ebene sind. ich habs korrigiert.

Mein Ziel ist übrigens ein dropdown-fähiges menu für ein eigenes wordpress theme.

Da das menu ja von wordpress erstellt und eingebunden wird, frag ich vielleicht an dieser stelle mal, was da der richtige ansatz ist? In den tutorials für Dropdown-menus finde ich hauptsächlich ansätze, die nur mit div-elemente, aber nicht mit Listen arbeiten, wie wordpress sie automtisch als menu erstellt.

bei der darstellung von listen über mehrere ebenen hab ich jetzt halt probleme. es soll in der desktop-ansicht erstmal ein container mit einer zeile (also erste menu-ebene mit display: inline) werden. Beim hover sollen dann entsprechend die unteren ebenen aufklappen.

 

Vielen Dank!


Da ich der Theme-Nutzung ja vorher nciht weiß, wie die verschachtelung später mal irgendwo aussieht, kann ich da natürlich im css keine so starren Muster hinterlegen, denk ich mal.

die doku zu der wp_nav_menu(9 schau ich mir in jedem Falle an! Aber es kommt ja aufs gleiche raus, wenn ich statt der Listen div-elemente verwende.

Ich muss mir wohl nen kopf machen, wie ich mit javascript die verschachtelung auslese und dann zB beim hovern eines Elements über das zuweisen von klassen mit entsprechender css-verknüpfung die nächste ebene sichtbar mache.

Korrier mich bitte, wenn es einen besseren Weg gibt. Naja. Bin halt Anfänger

Aber vielen Dank erstmal!!!

 

Hey, vielen Dank! Bin dabei mich damit zu beschäftigen. Natürlich weiß ich, dass das nicht unmittelbar etwas mit WP zu tun hat. Hatte gehofft, dass die Frage hier in der Design-Abteilung trotzdem okay wäre. Ich verstehe aber deinen Einwand und werde bei weiteren Fragen ein anderes Forum für dieses Thema suchen. Vielen Dank für deine Hilfe!!