Javascript 下拉菜单不使用键盘

有人能帮我使用这个下拉菜单吗？我遇到的问题是，不能使用键盘，如果你在菜单的第一项上单击tab键，它会打开菜单，但无法浏览下拉菜单中的项目

演示

CSS:

HTML:

---

我通过添加一些特定的tabindex并将focusin事件更改为fire slideDown，将focusout事件更改为fire slideUp来修复这个问题

代码如下：

HTML JS Fiddle在这里：

---

我想这回答了你的问题@jangxx谢谢你我会以同样的方式看的谢谢你，这是我一直在看的谢谢你

#menu{
    width:200px;
    background:#444;
}
.noBullets
{
    list-style: none;
    padding-left: 0px;  
}
#menu li a{
    padding:15px;
}
#menu a{
    display:block;
    color:#fff;
}
#menu ul ul{
    display:none;
    background:#000;
}
#menu ul ul a:hover{
    background:#222;
}

<div id="menu">
<ul class="noBullets">
    <li><a href="#">Home</a>
      <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Direcctions</a></li>
      <li><a href="#">Form</a></li>
      </ul>
    </li>
    <li><a href="#">ontact Us</a></li>
</ul>
</div> 

   $('#menu li:has(ul)').hover(function(){
        $(this).find('> ul').stop().slideToggle(400); 
    });

   $('#menu li:has(ul)').focus(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});

<div id="menu">
  <ul class="noBullets">
    <li><a href="#"  tabindex='0'>Home</a>
      <ul>
        <li><a href="#" tabindex='0'>About us</a></li>
        <li><a href="#" tabindex='0'>Direcctions</a></li>
        <li><a href="#" tabindex='0'>Form</a></li>
      </ul>
    </li>
    <li><a href="#" tabindex='0'>Contact Us</a></li>
  </ul>
</div>

$('#menu li:has(ul)').hover(
    function(){
        $(this).find('> ul').stop().slideDown(400); 
    },
    function(){
        $(this).find('> ul').stop().slideUp(400);
    }                       
);

$('#menu li:has(ul)').focusin(function(){
    $(this).find('> ul').stop().slideDown(400); 
});
$('#menu li:has(ul)').focusout(function(){
    $(this).find('> ul').stop().slideUp(400); 
});