- With an accessible accordion set in hand, you have a perfect base for an accessible main menu:
- Accordion set is perfect for the mobile menu view.
- Accordion functionality on desktop view great for people with hand motor control - they can 'pin' sub-panels open.
- Outside of custom styling and adjustments to hide all 'panels' by default in non-mobile views, main addition is one simple CSS rule:
DIV.gt-main-menu NAV LI:hover DIV.gt-menu-tray { display: block; }
Deciphered: adds 'display: block' rule to the 'gt-menu-tray' drop-down panel when mouse cursor is over the parent LI object ('hover' pseudo-class).
Important trick for getting absolutely positioned drop-downs to align correctly:
DIV.gt-main-menu NAV LI { display: inline-block; position: relative; }