下拉菜单不适用于键盘

Question

Can some one help me with this drop down menu, the problem that I'm having is that not working with the keyboard, If you tab on the first item of the menu it open the menu but is not possible to navigate thru the items inside the drop menu.

Demo http://jsfiddle.net/4S3w8/

CSS:

#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;
}

HTML:

<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> 

JS:

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

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

Answer 1

I fixed this by adding some specific tabindex's and changing the focusin event to fire slideDown and the focusout event to fire slideUp.

Code is here:

HTML

<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>

JS

$('#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); 
});

JS Fiddle is here:

http://jsfiddle.net/4S3w8/2/