• 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

Related scenarios