我怎樣才能使CSS下拉菜單可以訪問鍵盤導航？

Question

我看到了一些解決方案，但我無法弄清楚如何將這些解決方案放在我的代碼中，或者某些解決方案使用了某些我無法在我的項目中使用的解決方案。

讓我們進入正題：

我需要爲鍵盤導航已經存在的CSS下拉菜單訪問。我用[Tab]打開下拉菜單取得了一些進展，但我無法導航到裏面的選項。

這裏是我的代碼：

.menu .options-menu-dropdown{ 
 
     display: inline-block; 
 
     font-family: 'OpenSans Bold'; 
 
     font-size: 16px; 
 
     color: #646464;   
 
     text-decoration: none; 
 
     cursor: pointer; 
 
     position: relative; 
 
    } 
 
    .menu .menu-dropdown{ 
 
     z-index: -1; 
 
     visibility: hidden; 
 
     opacity: 0; 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     min-width: 180px; 
 
     text-align: right; 
 
     overflow: hidden; 
 
     margin-top: -6px; 
 
     margin-right: -6px; 
 

 
     -webkit-transition: all 200ms ease-in-out; 
 
     -moz-transition: all 200ms ease-in-out; 
 
     -ms-transition: all 200ms ease-in-out; 
 
     -o-transition: all 200ms ease-in-out; 
 
     transition: all 200ms ease-in-out;  
 
    } 
 
.menu .options-menu-dropdown:focus .menu-dropdown, 
 
    .menu .options-menu-dropdown:hover .menu-dropdown{ 
 
     z-index: 100; 
 
     visibility: visible; 
 
     opacity: 1; 
 
    } 
 
    .menu .title-dropdown{ 
 
     background-color: #005e8b; 
 
     font-size: 16px; 
 
     padding: 8px 6px; 
 
     white-space: nowrap; 
 
     border-bottom: 1px solid #b4b4b4; 
 
     color: #FFF; 
 
    } 
 
    .menu .menu-dropdown-item{ 
 
     display: block; 
 
     background-color: white;   
 
     padding: 12px 32px 12px 12px; 
 
     text-decoration: none; 
 
     cursor: pointer; 
 
     font-size: 16px; 
 
     color: #323232; 
 
     -webkit-transition: all 200ms ease-in-out; 
 
     -moz-transition: all 200ms ease-in-out; 
 
     -ms-transition: all 200ms ease-in-out; 
 
     -o-transition: all 200ms ease-in-out; 
 
     transition: all 200ms ease-in-out; 
 
     border-top: #b4b4b4 1px solid; 
 
     border-left: #b4b4b4 1px solid; 
 
     border-right: #b4b4b4 1px solid; 
 
    } 
 
    .menu .menu-dropdown-item:last-child{ 
 
     border-bottom: #b4b4b4 1px solid; 
 
    } 
 
    .menu .menu-dropdown-item:focus, 
 
    .menu .menu-dropdown-item:hover{ 
 
     background-color: #b4b4b4; 
 
     color: #fff; 
 
    }

<div class="menu" align="center" > 
 
    <div class="options-menu-dropdown" tabindex="0"> 
 
    <div>Test Menu</div> 
 
    <div class="menu-dropdown"> 
 
     <div class="title-dropdown">Opened Test Menu</div> 
 
     <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 1</a> 
 
     <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 2</a> 
 
     <a href="#" class="menu-dropdown-item" tabindex="1">Menu Item 3</a> 
 
    </div> 
 
    </div> 
 
</div>

代碼http://codepen.io/WillCodebit/pen/XpaqqJ

注：我試圖避免任何JavaScript的解決方案，因爲在這個項目中我需要使用GWT對於任何JavaScript，這是一種我無法違反的模式。

在此先感謝。

編輯 此菜單應該具有與Google的帳戶菜單類似的行爲。內部的選項也必須通過鍵盤訪問。

Answer 1

感謝香Youg誰試圖幫助。

我找到了一個解決方案，但我不得不放一些Javascript來使它工作。

HTML：

<div class="my-menu"> 
    <a id="menuUser" href="javascript:showHideMenu()" class=""> 
    <div> 
     Test 
    </div> 
    </a> 
    <ul id="menuUserDropdown" class="menu-dropdown"> 
    <li> 
     <a href="#" class="menu-dropdown-item"> 
     Option 1 
     </a> 
    </li> 
    <li> 
     <a href="#" class="menu-dropdown-item"> 
     Option 2 
     </a> 
    </li> 
    <li> 
     <a href="#" class="menu-dropdown-item"> 
     Option 3 
     </a> 
    </li> 
    </ul> 
</div> 

CSS：

.my-menu a{ 
    display: inline-block; 
    font-family: 'OpenSans Bold'; 
    font-size: 16px; 
    color: #646464; 
    text-decoration: none; 
    cursor: pointer; 
    position: relative; 
} 
.my-menu a div{ 
    padding: 4px 5px 4px 0; 
} 
.my-menu a.opened div, 
.my-menu a:hover div{ 
    background-color: #c9252b; 
    color: #fff; 
} 
.my-menu .menu-dropdown.opened{ 
    display: block; 
} 
.my-menu div{ 
    display: inline-block; 
    vertical-align: middle; 
} 
.my-menu .menu-dropdown{ 
    display: none; 
    margin: 0; 
    position: absolute; 
    z-index: 30; 
    background-color: #FFF; 
    list-style: none; 
    padding: 0; 
    border: 1px solid #b4b4b4; 
} 
.my-menu .menu-dropdown-item{ 
    display: block; 
    background-color: white; 
    padding: 12px; 
    text-decoration: none; 
    width: 162px; 
    cursor: pointer; 
    font-size: 16px; 
    color: #323232; 
} 
.my-menu .menu-dropdown-item:focus, 
.my-menu .menu-dropdown-item:hover{ 
    background-color: #b4b4b4; 
    color: #fff; 
} 

的Javascript，好，我與GWT做，但邏輯很簡單：

/* Just add or remove the class "opened" from "menuUser" and "menuUserDropdown". 
    You can put a "blur()" and "mouseLeave()" functions 
    to close the menu when the user moves away the cursor or 
    move the focus out of the menu too. */ 

Answer 2

From Heydon Pickering - Practical ARIA examples：

<nav role="navigation" aria-label="example with dropdowns"> 
<ul class="with-dropdowns"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="/about" aria-haspopup="true">About</a> 
     <ul aria-hidden="true" aria-label="submenu"> 
      <li><a href="/about/#who-we-are">Who we are</a></li> 
      <li><a href="/about/#what-we-do">What we do</a></li> 
      <li><a href="/about/#why">Why</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>