About CSS Dropdown Builder

Hover + focus-within dropdown — zero JS, animated. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers building navigation dropdowns without JavaScript
• Designers prototyping hover menu styles and animations visually
• Accessibility engineers creating keyboard-navigable dropdown patterns
• Web developers generating lightweight dropdown CSS for simple sites

Tips

• Uses hover and focus-within for keyboard-accessible dropdown behavior
• Customize animation timing for smooth dropdown reveal transitions
• No JavaScript required — the dropdown is entirely CSS-driven

Fun Facts

• The CSS :focus-within pseudo-class, standardized in 2017, finally made pure CSS dropdowns keyboard-accessible — before that, hover-only dropdowns were inaccessible to keyboard users.
• Dropdown menus in web design originated from desktop OS menu bars — the first web implementations in the late 1990s used nested <ul> lists styled with CSS, a pattern still used today.
• Suckerfish Dropdowns, published by Patrick Griffiths and Dan Webb in A List Apart (2003), was the first widely adopted pure CSS dropdown technique and influenced a generation of menus.

FAQ

How does a zero-JS dropdown work?

`:focus-within` on the trigger container keeps the dropdown open while any child has focus. Combined with `:hover`, it works for both mouse and keyboard.

Is it accessible?

Partially. For full ARIA menu semantics (role=menu, keyboard navigation with Arrow keys) you need JavaScript. The CSS version is fine for simple navigation menus.

Can I nest submenus?

Yes — multiple levels work with the same :focus-within trick. Beyond two levels the UX gets cramped; consider a sidebar or mega menu instead.

Does it close when clicking outside?

Yes — losing focus closes it. No JS needed for the common case. For sticky dropdowns that require a click outside to close, JS is required.