Comment implémenter ce menu en utilisant un pseudo-classeur css?

Question

J'ai développé un menu, mais je veux ajouter une fonctionnalité de clavier au menu. Lorsque le menu est focalisé, je voudrais pouvoir appuyer sur pour entrer le pour afficher le menu. Ensuite, je serais en mesure d'appuyer sur Tab pour sélectionner les éléments de menu. Ensuite, je veux appuyer sur ESC pour masquer les éléments de menu.

Comment changer mon CSS?

HTML

<ul class="hMenu"> 
    <li><a href="">prod1</a> 
    <div> 
     <a href="">test1</a> 
     <a href="">test2</a> 
     <a href="">test3</a>     
    </div> 
    </li> 
    <li><a href="javascript:void(0);" >prod2</a> 
    <div> 
     <a href="">test4</a> 
     <a href="">test5</a>     
    </div> 
    </li> 
</ul> 

CSS

ul.hMenu li:hover a { 
    color:red; 
}   
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; 
} 

Answer 1

Je suis venu avec une solution qui va vous aller dans la bonne direction.

CSS ne peut pas gérer les événements liés à des clés spécifiques qui sont saisies. Vous aurez besoin d'utiliser javascript, ou dans ce cas jQuery, pour vous aider.

La fonction keypress est ce que vous recherchez dans cette situation.

Je ne sais pas comment faire la fonction de tabulation, mais j'ai eu la Entrez et ESC fonctionnalités pour travailler

Voici le jQuery

$('document').ready(function() { 
    var menu = $(".hMenu"); 
    menu.hide() 
    $("body").on("keypress", function (e) { 
     if (e.keyCode === 13) { //Key Code for Enter 
      menu.fadeIn(); 
     } 
     if (e.keyCode === 27) { //Key Code for ESC 
      menu.fadeOut(); 
     } 
     if (e.keyCode === 9) { //Key Code for Tab 
      //Tabbing function here 
     } 
    }); 
}); 

Fiddle

Cela effacera efficacement le menu dans et hors lorsque vous appuyez sur la touche respective.