ドロップダウンメニューTabkey pure CSS

Question

javascriptが無効になっていても、タブキーでアクセス可能な単純なドロップダウンメニュー（jFiddle）を作成しようとしています。

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> 

それは純粋なCSSでタブ・キーを持つエントリを反復処理することは可能ですか？私は次のようにリンクを反復したい

：

メニュー1 - > Eintrag 1 - > Eintrag 2 - >メニュー2 - > Eintrag 1 - > Eintrag 2 - > Eintrag 3 - > Eintrag 4

CSSコード

a:focus + ul{ 
    display: block; 
} 

で

私はメニュー1、その後Eintrag 1上のタブとEintrag 2が見えることができます。タブを再度押すと、Eintrag 1が表示され、ulが表示されなくなります（display：noneが表示されるため）Eintrag 2にアクセスできません。すべてのエントリをタブで移動する簡単なCSSソリューションはありますか？

Answer 1

あなた<a>タグでtabindex="XXXX"を記述する場合XXXXは、増分数であるとき、tabindex属性は、あなたの要素がタブキーによって集束されるもので順序を定義します。

だから：あなたは非重視する要素が必要な場合は

<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> 

は、その要素にtabindex="-1"を設定します。あなたが焦点に開くように、フォーカス状態と同じホバー状態を設定し、あなたのCSSを変更することも必要

：

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

Answer 2

は私が正しくあなたの条件を理解して考えるとは、ここに私の答えは：

タブは何らかの形でラジオボタンのように機能します。インスタンスでは1つのみ選択できます。すべてのタブをラジオボタンに関連付けて、選択したラジオボタンに応じて現在のタブを確認してみませんか？

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>