I have created a menu and now I want to enhance its functionality by adding keyboard support. My goal is to make the menu accessible using keyboard keys, such as pressing Enter to show the menu, Tab to navigate through menu items, and ESC to hide the menu.
How can I modify my CSS to achieve this?
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;
}