@@Martl
/* Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar */ li.menu ul { display: none; } /* Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen. Das wird nicht gebraucht: li.menu:active ul li*/ li.menu:hover ul, li.menu:focus ul { display: block; font-size: 0.9em; font-style: italic; margin-left: 2em; }
Getestet hast du das aber nicht‽ Das kann überhaupt nicht funktionieren.
<ul> <li class="menu" tabindex="0"><a href="/wir.shtml">Über uns</a> <ul> <li> <a href="/wir.shtml#wws">Wer wir sind</a></li> <li> <a href="/wir.shtml#wwt">Was wir tun</a></li> </ul> </li> </ul>
Den
tabindex="0"
wie beatovich schon schrieb.
Und dann? Dann kannst du das li
-Element fokussieren; das Untermenü geht auf. Um dorthin zu gelangen: [Tab] – das a
-Element „Über uns“ erhält den Fokus.
Das heißt: das li
-Element verliert den Fokus; das Untermenü geht zu, bevor man dahin gelangt.
Wie ich schon schrieb, geht’s mit :focus-within
. Dann ist es auch überhaupt nicht notwendig (sondern störend), dass das li
-Element fokussierbar ist (weil das „Über uns“ ja fokussierbar ist).
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann