Dropdownmenu Tabkey pure CSS

Question

我想構建一個簡單的dropdownmenu（jFiddle），即使javascript被禁用，也應該使用tab鍵訪問它。

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可見。再次按Tab鍵Eintrag 1然後ul再次不可見（因爲它顯示：none），所以我無法訪問Eintrag 2。有沒有簡單的CSS解決方案如何通過所有條目選項卡？

Answer 1

如果您在<a>標籤中編寫tabindex="XXXX"標籤，則當XXXX是增量編號時，tabindex將定義您的元素將通過tab鍵進行聚焦的順序。

所以：

<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

考慮我理解正確的您的要求，這裏是我的回答：

選項卡以某種方式像單選按鈕一樣工作。您可以在實例中僅選擇一個。爲什麼不把每個標籤都關聯到​​一個單選按鈕，並根據所選的單選按鈕檢查當前標籤。

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>