Menü 8: Buttons erzeugen und Submenüs verstecken

Dieses Beispiel erweitert die CSS-basierte Variante um einige Zusatzfunktionen, die das Dropdown-Menü für alle benutzbar machen.

Ziele sind:

HTML: verschachtelte Listen mit bis zu drei Ebenen ohne Klassen
CSS: Auf schmalen Viewports vertikal - auf genügend breiten Viewports horizontal angeordnet.
JavaScript Bedienung mit Maus, Touch und Tastatur
- Jedes Listenelement mit einer Unterliste enthält zwei UI-Elemente:
  - den eigentlichen Link auf eine Unterseite und …
  - einen dynamisch erzeugten Button zum Öffnen/Schließen des Untermenüs.
- Links und Buttons können mit der Tab-Taste ↹ angetabbt und dann mit⏎ oder Space ausgewählt werden. (Shift+↹ führt zurück!)
- ESC schließt das aufgeklappte Menü

Um die Funktionsweise der Tastenbedienung zu demonstrieren,
wurden die CSS-Regelsätze für `li:hover ul` auskommentiert.

Für ganz Ungeduldige gibt es eine Kopiervorlage.