← All elements
<div class="mm"><a tabindex="0">Products ▾</a><div class="pn"><div><b>Build</b><span>Editor</span><span>Preview</span></div><div><b>Share</b><span>Embed</span><span>Export</span></div><div><b>Learn</b><span>Guides</span><span>Docs</span></div></div></div>About this menu
A navigation link that reveals a wide panel of grouped links when hovered or focused, with no JavaScript.
How it works
A panel is hidden with opacity, visibility and a small offset, then revealed when the wrapper is hovered or contains focus. Three columns of grouped links are laid out with flexbox.
Ways to customise it
- Add more columns.
- Change the panel width with padding and gap.
- Make the trigger a real link.
Good to know
Hover-only menus fail on touch, so the focus-within rule matters for keyboard users. Provide a button with aria-expanded in production.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.