Mega menu
A wide multi-column panel that drops from a nav item, showing whole site sections at once instead of a thin list of links.
See it
What it is
A mega menu is a wide panel that drops from a top-level nav item and lays out whole sections of the site at once: grouped column headings, dozens of links, often a promo image or featured product on the right. Amazon, Apple, and most large retail and enterprise sites run one.
Reach for it when your information architecture is broad and shallow and hiding it behind a thin one-column list would force people to hunt level by level. Showing the groups makes the structure of the site legible in a single glance, which is the whole point.
Gotcha: hover is where mega menus die. Open on hover with no delay and the panel flickers as the cursor crosses the nav; close the instant the cursor leaves and the panel vanishes while people move diagonally toward a link. Add roughly 100ms of open intent, a close delay, and a forgiving 'safe triangle' between trigger and panel. Also: hover does not exist on touch, so the mobile version has to become a drawer with accordions, and every link still needs to be reachable with Tab and dismissible with Escape.
Ask AI for it
Build a mega menu for the site header: hovering or focusing a top-level nav item opens a full-width panel below the header containing 3 to 4 columns of grouped links, each column with a small uppercase heading, plus an optional featured card on the right. Open on 100ms hover intent and close on a 200ms leave delay so diagonal cursor movement does not dismiss it, and open immediately on keyboard focus. Animate in with a 150ms fade plus 4px rise. Close on Escape, on outside click, and on tab out. Below 900px, collapse the whole thing into a slide-in drawer where each top-level item is an accordion section.