Untermenü klappt nicht!

[Rolf B]

Hallo franzsen,

ich muss mit der Standard-Antwort von Selfhtml für solche (Un-)Fälle anfangen: Dein Menü funktioniert nicht. Ich kann auf meiner Tastatur tippen wie ich will, da tut sich nichts.

Damit meine ich:

Ein reines CSS Menü ist rein mausbedienbar und damit nichts, was man seinen Besuchern zumuten darf. Bereits mit einem Touch-Gerät gibt's Probleme. Von Sprachassistenzsystemen reden wir gar nicht erst. Eine zugängliche Dropdown-Navigation ist bei uns im Wiki leider Baustelle, deshalb kann ich Dich dafür im Moment vor allen an Heydon Pickering und seine Inclusive Components verweisen, das ist allerdings ein ziemlich zäher Tobak weil er das Thema so richtig gründlich auf englisch durchdekliniert. Er hat aber zusammen mit Kitty Giraudel einen fertigen Baustein entwickelt. Guckst Du. Bedienbare, zugängliche Menüs sind leider nichts, was sich eben mal so erstellen lässt.

Wichtig ist, dass die Menü-Items Buttons sind, keine nackigen li Elemente. Andernfalls können sie nicht bedienbar interaktiv sein. Das Öffnen und Schließen muss dann mit JavaScript erfolgen.

Aber zum Einsteigen ins Thema bleiben wir erstmal bei deiner Frage´und einem CSS Menü. Abgesehen davon, dass mir dieses Video reichlich spanisch vorkommt (zumindest bietet Youtube mir an, spanische Untertitel automatisch zu erzeugen), hast Du nicht alles verglichen.

Das Problem ist der margin-top der #container ul Regel, dadurch entstehen 20px frische Luft oberhalb von jedem ul in der Navigation, auch zwischen Hauptmenüpunkt und Untermenü und die genügen, um den :hover-Zustand zu beseitigen.

Wenn Du eine CSS Eigenschaft setzen willst, die NUR für das oberste ul gilt, verwende nav > ul. Andernfalls gilt die Eigenschaft für jedes ul in der Navigation. Wenn es nur die zweite Ebene sein soll, verwende nav > ul > ul. Das > bewirkt, dass eine direkte Kindbeziehung bestehen muss. Ein Space heißt: beliebig weit entfernter Nachfahre.

Wenn Du einen Margin oberhalb deines Gesamtmenüs haben willst, setze den Margin auf das <nav>-Element, in das deine Navigation eingeschlossen gehört. Nicht in ein <div id="container">. Ein Megacontainer innerhalb des Body ist sowieso in den meisten Fällen unnötig.

Wenn Du tatsächlich etwas Abstand zwischen Hauptmenüpunkten und Aufklappmenü willst, gib dem Aufklappmenüs ein padding-top. Das Padding gehört zur Box des ul-Elements und da kannst Du drüber weg hovern. Das siehst Du auch, wenn Du den Seiteninspektor öffnest und für eins der li-Elemente der obersten Ebene den Hover-Schalter setzt (li zum aktuellen Element machen, rechts auf :hov klicken, :hover auswählen). Dann bleibt das Ausklappmenü offen und Du kannst analysieren, was da passiert.

Und vor allem: VERGISS PIXEL. Verwende relative Maße wie em, denn mit der px Angabe reagiert dein Menü nicht auf eine vom Benutzer eingestellte Änderung der Basisfontgröße.

Ein ordentliches Menü bekommst Du aber ohne JavaScript nicht hin. Tut mir leid.

Rolf