Menu – support keyboard navigation


I’m trying to make my menu to support keyboard navigation (as described here) but I’m not succeeding in making submenu visible when main menu-item is focused.

// submenu
.my-nav ul .sub-menu {position:absolute; top:100%; opacity:0;}

// submenu visible when hovering parent item
.my-nav ul li:hover > .sub-menu {display:block; opacity:1;}

// focus?
.my-nav ul li:focus > .sub-menu {display:block; opacity:1;}

So the focus part has no effect at all. What am I doing wrong here?


Source link