Dropdownmenü Tabschlüssel pure CSS

Question

Ich versuche ein einfaches Dropdown-Menü (jFiddle) zu erstellen, das mit der Tab-Taste erreichbar sein sollte, auch wenn JavaScript deaktiviert ist.

ul { 
    list-style-type: none; 
} 
#nav > li { 
    display: inline-block; 
    cursor: pointer; 
} 
#nav a { 
    text-decoration: none; 
    color: white; 
    padding: 20px; 
    display: inline-block; 
} 
li { 
    width: 100px; 
    color: white; 
    background-color: #08C; 
} 
ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
} 
ul#nav > li:hover > ul { 
    display: block; 
} 

<ul id='nav'> 
    <li><a href='#'>Menu 1</a> 
    <ul> 
     <li><a href='#'>Eintrag 1</a></li> 
     <li><a href='#'>Eintrag 2</a></li> 
    </ul> 
    </li> 
    <li><a href='#'>Menu 2</a> 
    <ul> 
     <li><a href='#'>Eintrag 1</a></li> 
     <li><a href='#'>Eintrag 2</a></li> 
     <li><a href='#'>Eintrag 3</a></li> 
     <li><a href='#'>Eintrag 4</a></li> 
    </ul> 
    </li> 
</ul> 

Ist es möglich, durch die Einträge mit der Tab-Taste mit reinem CSS zu wiederholen?

Ich möchte durch die Links zu durchlaufen wie folgt:

Menü 1 -> Eintrag 1 -> Eintrag 2 -> Menü 2 -> Eintrag 1 -> Eintrag 2 -> Eintrag 3 -> Eintrag 4

Mit dem CSS-Code

a:focus + ul{ 
    display: block; 
} 

I Reiter auf Menü kann 1 und dann Eintrag 1 und Eintrag 2 sichtbar sind. Drücken der Tabs wieder fokussiert Eintrag 1 und dann ist die ul wieder nicht sichtbar (weil es Anzeige: keine), so kann ich nicht zugreifen Eintrag 2. Gibt es eine einfache CSS-Lösung, um alle Einträge durchzublättern?

Answer 1

Wenn Sie tabindex="XXXX" in Ihren <a> Tags schreiben, wenn XXXX eine inkrementelle Zahl ist, wird die tabindex die Reihenfolge definieren, was Ihre Elemente durch die Tabulatortaste fokussiert werden.

So:

<ul id='nav'> 
    <li><a href='#' tabindex="1">Menu 1</a> 
    <ul> 
     <li><a href='#' tabindex="2">Eintrag 1</a></li> 
     <li><a href='#' tabindex="3">Eintrag 2</a></li> 
    </ul> 
    </li> 
    <li><a href='#' tabindex="4">Menu 2</a> 
    <ul> 
     <li><a href='#' tabindex="5">Eintrag 1</a></li> 
     <li><a href='#' tabindex="6">Eintrag 2</a></li> 
     <li><a href='#' tabindex="7">Eintrag 3</a></li> 
     <li><a href='#' tabindex="8">Eintrag 4</a></li> 
    </ul> 
    </li> 
</ul> 

, wenn Sie ein Element brauchen nicht konzentriert zu sein, setzen Sie tabindex="-1" auf dieses Element.

Sie müssen auch Ihre CSS ändern, die Hover-Zustand der gleiche wie der Fokuszustand einstellen, im Fokus zu öffnen:

ul#nav > li:hover > ul 
ul#nav > li:focus > ul { 
    display: block; 
} 

Answer 2

bedenkt, dass ich Ihre Anforderung richtig verstanden habe, hier ist meine Antwort:

Registerkarten funktionieren in gewisser Weise wie Optionsfelder. Sie können nur eine Instanz auswählen. Warum verknüpfen Sie nicht alle Registerkarten mit einem Optionsfeld und prüfen Sie anhand des ausgewählten Optionsfelds nach dem aktuellen Register.

ul{ 
 
    list-style-type: none; 
 
} 
 

 
#nav > li{ 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
#nav label, #nav a{ 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 20px; 
 
    display: inline-block; 
 
} 
 

 
li{ 
 
    width: 100px; 
 
    color: white; 
 
    background-color: #08C; 
 
} 
 

 
ul ul{ 
 
    display:none; 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul#nav input.tabset{ 
 
width:0px; 
 
    height:0px; 
 
    padding:0px; 
 
} 
 

 
ul#nav input.tabset:checked ~ ul{ 
 
    display: block; 
 
}

<ul id='nav'> 
 
    <li><input class="tabset" id="menu1" name="tabset1" type="radio" /><label for="menu1" href='#'>Menu 1</label> 
 
    <ul> 
 
     <li><a href='#'>Eintrag 1</a></li> 
 
     <li><a href='#'>Eintrag 2</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><input class="tabset" id="menu2" name="tabset1" type="radio" /><label for="menu2" href='#'>Menu 2</label> 
 
    <ul> 
 
     <li><a href='#'>Eintrag 1</a></li> 
 
     <li><a href='#'>Eintrag 2</a></li> 
 
     <li><a href='#'>Eintrag 3</a></li> 
 
     <li><a href='#'>Eintrag 4</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>