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.

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.

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.

CSS Dropdown Builder | DevTools Surf

DevTools Surf

Example: CSS Dropdown Builder

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

bg=#fff border=#e5e7eb

Output

.dropdown { position: relative; display: inline-block; }
.dropdown .menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 180px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: all 160ms ease;
}
.dropdown:hover .menu, .dropdown:focus-within .menu { opacity: 1; pointer-events: auto; transform: none; }
.dropdown .menu a { display: block; padding: 8px 12px; border-radius: 6px; color: #374151; text-decoration: none; }
.dropdown .menu a:hover { background: #f3f4f6; }

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.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus