Geschachtelte Menu-Struktur mit [TAB] durchlaufen
Humphrey
- css
Hallo Forum,
es soll sein eine Liste als Menü, wobei die Struktur der 2. Ebene zunächst ausgeblendet ist, siehe unten HTML, CSS. Mit ":hover" wird die 2. Ebene erwartungsgemäß eingeblendet und ist navigierbar, bei ":focus" (per [TAB]) wird die 2. Ebene auch eingeblendet aber mit dem nächsten [TAB]-Schritt (logischerweise?) wieder ausgeblendet.
Meine Frage dazu: Gibt es eine Möglichkeit (nur mittels CSS-Deklaration) auch die 2. Ebene mit [TAB] einzublenden und durchlaufen zu können? Oder versuche ich hier die Quadratur des Kreises?
HTML:
<ul>
<li><a href="#">1. Ebene - 1</a>
<ul>
<li><a href="#">2. Ebene - 1.1</a></li>
<!-- usw. -->
<li><a href="#">2. Ebene - 1.n</a></li>
</ul>
</li>
<!-- usw. -->
<li><a href="#">1. Ebene - n</a></li>
</ul>
CSS:
li > ul{display:none;}
li > a:hover + ul, li > a:focus + ul{display:block;}
Hallo Matthias,
danke, ein guter Hinweis; das Wiki vergesse ich immer wieder. Aber der Kern meiner Frage war eigentlich "nur mittels CSS-Deklaration". Bei dem Beispiel "Multilevel-Dropdown-Navigation" tapp der [TAB] ohne JavaScript (hier: Win XP, FireFox 8.0) im Dunklen bzw. gar nicht. Also doch die Quadratur des Kreises?
Gruß, Humphrey