Keyboard Accessible 'Tab-to' Menu

This is a multi-level CSS menu, where :hover activated sub-menus are accessible via a keyboard's TAB key. This cannot be done with CSS alone. The :hover sub-menu reveal is done with CSS, but tab focus sub-menu reveal is done with JavaScript.

The Problem

:hover activated CSS menus can only have their first-level buttons tabbed-to. While sub-menus can be momentarily revealed when a parent receives :focus, they will be hidden again once the user tabs off the parent button (when it loses focus). You can see the lost :focus issue here.

A Solution

The JavaScript at play below adds an ".active" class to buttons that have sub-menus, when they receive focus. This class is only removed when the previous or next sibling button is tabbed-to.