tabindex專注於使用CSS調用子菜單

Question

我正在構建一個垂直導航，它位於頁面的左側。 和導航通過懸停來調用子菜單。 但這裏的問題是我想建立此導航可能是迴應由TAB。

我得到的情況是，當我將鼠標懸停在導航欄上時，子菜單將緩解。但是我想使用Tab來關注主手冊，然後子菜單也會緩解。但它不起作用。

可以用HTML和CSS來完成嗎？

例子：https://www.whitehouse.gov/

這是我的HTML代碼：

   <nav id="menu"> 
       <ul class="parent-menu"> 
       <li > 
       <a href="#" tabindex="1" >Home & Kitchen</a> 
       <ul> 
       <li><a href="#" tabindex="2">item</a></li> 
       <li><a href="#" tabindex="3">item</a></li> 
       <li><a href="#" tabindex="4">item</a></li> 
       <li><a href="#" tabindex="5">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       </ul> 
       </li> 

       <li tabindex="2"> 
       <a href="#" >Electronics</a> 
       <ul> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       </ul> 
       </li> 

       <li tabindex="3"> 
       <a href="#" >Clothing</a> 
       <ul> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       </ul> 
       </li> 

       <li> 
       <a href="#">Cars & Motorbikes</a> 
       <ul> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       </ul> 
       </li> 

       <li> 
       <a href="#">Books</a> 
       <ul> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       <li><a href="#">item</a></li> 
       </ul> 
       </li> 

       <li> 
       <a href="#">Support</a> 
       <ul> 
       <li> 
       <a href="#">Contact Us</a> 
       </li> 
       <li><a href="#">Forum</a> 
       </li> 
       <li><a href="#">Deliveries</a></li> 
       <li><a href="#">T&C</a></li> 
       </ul> 
       </li> 
     </ul> 
    </nav> 

這裏是我的CSS代碼：

p, ul, li, div, nav { padding:0; margin:0; } 
#menu { 
overflow: auto; 
position:fixed; 
left:0%;top:20%; 
z-index:2; } 
.parent-menu { 
background-color: #0c8fff; 
min-width:200px; 
float:left; } 
#menu ul { 
list-style-type:none; 
} 
#menu ul li a { 
padding:10px 15px; 
display:block; 
color:#fff; 
text-decoration:none; 
} 
#menu ul li a:hover { 
background-color:#007ee9; 
    } 
#menu ul li:hover > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
} 
#menu ul li:focus > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 
#menu ul li > ul { 
position: fixed; 
background-color: #333; 
top: 20%; left: -200px; 
min-width: 200px; 
z-index: -1; 
height: 100%; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
} 
#menu ul li > ul li a:hover { 
background-color:#2e2e2e; 
} 

這裏是我找到棘手。這裏的懸停工作正常。但是當談到焦點時，這是行不通的。

#menu ul li:hover > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
} 
#menu ul li:focus > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 

希望你們能理解我說的話:)

Answer 1

您可以在不tabindex屬性按如下方式使用：

#menu ul li a:focus + ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
} 

赤這種小提琴https://jsfiddle.net/toz7n3ym/1/）

OR刪除href from a，當你使用href時它的重點在於< a>不在< li> 檢查這個小提琴https://jsfiddle.net/toz7n3ym/