怎么实现用键盘选择菜单

如何实现用键盘选择菜单？
我用css+html做了一个菜单，当鼠标移上去的时候菜单出来，移开菜单消失。
但现在要添加功能："当用Tab聚焦到主菜单上按下enter键时子菜单显示出来，此时按tab键可以选择子菜单项，按下ESC子菜单消失"，该怎样改？可以用css或者结合javascript，只要能实现即可，现在非常急，请大家帮忙。

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;prod menus&lt;/title&gt;

&lt;style&gt;
ul.hMenu li:hover a { color:red;}           
        ul.hMenu li div table{  background-color:yellow;}    
        ul.hMenu  { 
            margin: 0;
            padding: 0; 
            z-index: 1;                 
        }
        ul.hMenu li  {  
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width:140px;
        }
        ul.hMenu li a { 
            display: block; 
            text-align: left;
            text-decoration: none
        }          
        ul.hMenu li div  {                    
            position: absolute;             
            display: none;                
        }
        ul.hMenu div a {background: yellow;      
 
        }
        ul.hMenu li :hover   {  background: yellow}
        /**Mouse hover the menus can show up**/
        ul.hMenu li:hover   div{            
            display:block;
        }
        /**Why this line can not work when the "Tab" to focus on the menu？**/
        ul.hMenu li :focus  div{            
            display:block;
        }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;ul class="hMenu"&gt;
&lt;li&gt;&lt;a href=""&gt;prod1&lt;/a&gt;
&lt;div&gt;
&lt;a href=""&gt;test1&lt;/a&gt;
&lt;a href=""&gt;test2&lt;/a&gt;
&lt;a href=""&gt;test3&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="javascript:void(0);" &gt;prod2&lt;/a&gt;
&lt;div&gt;
&lt;a href=""&gt;test4&lt;/a&gt;
&lt;a href=""&gt;test5&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt; 
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

[解决办法]

引用:

onkeydown事件就可以了

$(document).keydown(function(e){
var key = ev.keyCode
[解决办法]
ev.witch;
switch(key) {
case 13://回车
alert('回车');
break;
case 27:
alert('esc');

break;
case 38:
alert('上');
break;
case 40:
alert('下');
break;
}
});

写错了点
$(document).keydown(function(ev){
var key = ev.keyCode
[解决办法]
ev.witch;
switch(key) {
case 13://回车
alert('回车');
break;
case 27:
alert('esc');
break;
case 38:
alert('上');
break;
case 40:
alert('下');
break;
}
});

怎么实现用键盘选择菜单

热点推荐