Siehe hierzu das erste Beispiel. In diesem Beispiel wurden die a Elemente in den li Elementen mit Hintergrundfarbe, padding etc. versehen. Außerdem wurde das ul als display:flex angelegt, damit die li Elemente nebeneinander liegen. ul wird mit position: relative versehen, damit man die darin verschachtelte ul mittels position: absolute über dem darunterliegenden Inhalt liegt. ul li:hover ul{position:absolute,}
Bei so einem DropDown Menü, welches mittels hover Klasse aufgeklappt wird, gibt es ein Problem für Screenreader. Mit der Tab-Taste kann man hier nicht das Sub-Menü aufrufen. Die Lösung ist die ziemlich neue Klasse :focus-within. Damit lassen sich auch die Kindelemente mit Tabulator Taste ansteuern. ul li:focus-within > ul Siehe auch dieses Beispiel.
Zurück zum Start Menü