Making a hover elements just a little more accessible with a little css

But we can do better

for large menus you need to tab through each element in the dropdown to get to the next. FollowingW3C on Flyout menu's we can open/close the submenus on hover, click, keyboard-click, and when the user tabs out of a submenu and onto the next item.

But we can make it nicer

now we can't have a link to the overall category e.g. of /products page, since this now opens the dropdown. w3's second version uses toggle buttons, but those intrude a bit too much into the design for my liking. I actually really like the way ebay did it with toggle buttons that appear only when you keyboard-tab onto them.

To me this seems quite nice as the menu still works with normal mouse-hover contentions, and the keyboard experience is quite close to that. Additionally it uses each html element in its intended purpose. and could probably also be done with css and quite minimal vanilla js