我怎样才能使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>