@@J o > Auch das geht, [Dropdown Menüs](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten#Horizontale_Formatierung). **Aber nicht so!** Der Abschnitt [Submenü ausblenden](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten#Submen.C3.BC_ausblenden) und das dortige Beispiel sind **grob fehlerhaft**: `tabindex="0"` auf die `li` zu setzen, damit diese den Tastaturfokus erhalten können, ist ein eher mittelguter Hack. Und was tun [Browser, die `:focus-within` nicht verstehen](https://caniuse.com/#feat=css-focus-within), mit folgender Regel? ~~~CSS,bad nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu, nav li:focus-within .submenu { visibility: visible; height: auto; } ~~~ Gar nichts! Sie wird komplett ignoriert. In IE und Edge geht das Menü nicht einmal bei Hover auf. Das hätte dem Ersteller des Beispiels eigentlich auffallen sollen. Damit Browser wenigstens den ihnen verständlichen Teil verarbeiten, muss der Selektor dafür für sie vollständig verständlich sein. Man müsste die Regel also aufteilen: ~~~CSS nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu { visibility: visible; height: auto; } nav li:focus-within .submenu { visibility: visible; height: auto; } ~~~ Ich hab das in diesem [Testbeispiel](https://bittersmann.de/test/dropdown-menu) mal gegenübergestellt: **Menü 1** vs. **Menü 2**. Menü 2 öffnet sich zwar auch in Browsern, die `:focus-within` nicht verstehen. Man kommt aber mit Tastatursteuerung nicht an die Unterpunkte heran. Ein CSS-only-Dropdown-Menü funktioniert nur mit `:focus-within`. Man darf in Browsern, die `:focus-within` nicht verstehen, das Ding nicht verstecken. Wie bei **Menü 3** umgesetzt: in IE und Edge ist das Ding immer offen. Und den Hack mit `tabindex` braucht man auch nicht. Wenn es auch ohne `:focus-within` auf-/zuklappen soll, kommt man an einer JavaScript-Lösung nicht vorbei. Auch dann gilt: Ohne JavaScript muss das Ding immer offen sein; erst mit JavaScript zuklappen. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@J o > Auch das geht, [Dropdown Menüs](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten#Horizontale_Formatierung). **Aber nicht so!** Der Abschnitt [Submenü ausblenden](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten#Submen.C3.BC_ausblenden) und das dortige Beispiel sind **grob fehlerhaft**: `tabindex="0"` auf die `li` zu setzen, damit diese den Tastaturfokus erhalten können, ist ein eher mittelguter Hack. Und was tun [Browser, die `:focus-within` nicht verstehen](https://caniuse.com/#feat=css-focus-within), mit folgender Regel? ~~~CSS,bad nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu, nav li:focus-within .submenu { visibility: visible; height: auto; } ~~~ Gar nichts! Sie wird komplett ignoriert. In IE und Edge geht das Menü nicht einmal bei Hover auf. Das hätte dem Ersteller des Beispiels eigentlich auffallen sollen. Damit Browser wenigsten den ihnen verständlichen Teil verarbeiten, muss der Selektor dafür für sie vollständig verständlich sein. Man müsste die Regel also aufteilen: ~~~CSS nav li:hover .submenu, nav li:active .submenu, nav li:focus .submenu { visibility: visible; height: auto; } nav li:focus-within .submenu { visibility: visible; height: auto; } ~~~ Ich hab das in diesem [Testbeispiel](https://bittersmann.de/test/dropdown-menu) mal gegenübergestellt: **Menü 1** vs. **Menü 2**. Menü 2 öffnet sich zwar auch in Browsern, die `:focus-within` nicht verstehen. Man kommt aber mit Tastatursteuerung nicht an die Unterpunkte heran. Ein CSS-only-Dropdown-Menü funktioniert nur mit `:focus-within`. Man darf in Browsern, die `:focus-within` nicht verstehen, das Ding nicht verstecken. Wie bei **Menü 3** umgesetzt: in IE und Edge ist das Ding immer offen. Und den Hack mit `tabindex` braucht man auch nicht. Wenn es auch ohne `:focus-within` auf-/zuklappen soll, kommt man an einer JavaScript-Lösung nicht vorbei. Auch dann gilt: Ohne JavaScript muss das Ding immer offen sein; erst mit JavaScript zuklappen. LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann