- Success Criterion 1.4.13
- Conformance level AA
Mega-Menu That Collapses When Crossing the Gap to Reach It
1.4.13 — Content on Hover or Focus
Scenario
Setting
A subscription box service's account settings
What’s wrong
Mega-menus opening on hover that collapse when crossing a gap to reach them.
Example
.account-menu:hover .mega-panel { display: block; top: 100%; }
.mega-panel { margin-top: 12px; } /* the 12px gap between trigger and panel has no hover coverage, so the menu collapses mid-crossing */ Why it matters
A member moving the mouse diagonally from 'Account' down to a submenu item crosses the 12px gap and the whole mega-menu collapses before they arrive.
How to test
Hover over a mega-menu trigger, then move the pointer diagonally toward the opened menu: if there's a gap that causes it to collapse before you arrive, it fails.
How to fix
Eliminate dead zones between a trigger and its panel so the hover area is continuous from one to the other.
.account-menu { padding-bottom: 12px; }
.mega-panel { margin-top: 0; } Outcome
A member glides the mouse from Account into the mega-menu and reaches Billing without the panel closing first.
Who is affected
Users with limited fine motor control need extra time and a forgiving path to reach submenu items, which this gap doesn't allow.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Hover Tooltip That Vanishes Before the Pointer Can Reach It
- Hover Content That Can’t Be Dismissed Without Moving the Mouse
- Tooltip That Can’t Be Closed With the Escape Key
- Hover Preview Card That Vanishes on the Slightest Pointer Move
- Focus-Triggered Popover That Steals or Dumps Keyboard Focus
- Tooltip That Covers the Very Field It’s Meant to Explain