Dropdown and Popover Patterns
Create accessible dropdown menus and popovers using CSS positioning and the Popover API.
Dropdown and Popover Patterns is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Popover API
The HTML Popover API (Chrome 114+, widely supported) provides declarative show/hide behavior: popover attribute on the target, popovertarget on the trigger button. No JavaScript needed for basic open/close, including light dismiss (click outside to close) and Escape key handling.
Styling Popovers
Target popover elements with [popover] or :popover-open. The ::backdrop pseudo-element is available for background dimming. Popovers render in the top layer like dialogs — no z-index stacking issues.
Dropdown Positioning with Anchor Positioning
CSS Anchor Positioning (Chrome 125+) positions a popover relative to its trigger without JavaScript: anchor-name: --btn on the trigger, position-anchor: --btn on the popover, then top: anchor(bottom); left: anchor(left) to align below the trigger.
Fallback with position: absolute
Without Anchor Positioning, use a positioned parent wrapper: position: relative on the container, position: absolute; top: 100%; left: 0 on the dropdown. This works cross-browser but requires the trigger and dropdown to be siblings in a positioned container.
Dropdown Menu CSS
Style the dropdown list as position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Menu items use padding, hover background, and full-width display.
Animation
Animate popover open/close using @starting-style for entry and transition-behavior: allow-discrete to animate the display property change. This enables CSS-only entry/exit animations tied to the popover open/closed state.
Keyboard Accessibility
Dropdown menus must support keyboard: Arrow keys navigate menu items, Enter/Space activate the focused item, Escape closes the menu and returns focus to the trigger. The Popover API handles Escape automatically; Arrow key navigation requires JavaScript event handling.
ARIA for Custom Dropdowns
Custom dropdown (not using popover API): add aria-haspopup="listbox" and aria-expanded to the trigger, role="listbox" to the list, role="option" and aria-selected to each item. Screen readers announce the expanded state and item count.
Overflow and Viewport Collision
A dropdown positioned below its trigger may overflow the viewport at the bottom. Detect this with IntersectionObserver or getBoundingClientRect and flip the dropdown above the trigger. CSS Anchor Positioning handles this with position-try-fallbacks.
Multi-Level Dropdowns
Nested dropdowns (submenus) add complexity. Position submenus to the right of their parent items. Add a delay before hiding on mouseout (using CSS transition-delay or JS timeout) to prevent submenus from closing during diagonal mouse movement.
Touch Device Considerations
Hover-triggered dropdowns fail on touch devices — there is no hover state. Use click/tap triggers universally. Tap-outside-to-close works via the popover API's light dismiss or a document click listener that closes open dropdowns.
Knowledge Check
What does the Popover API provide automatically that previously required custom JavaScript?
Summary
The Popover API and CSS Anchor Positioning together enable declarative, JavaScript-minimal dropdown and popover patterns. For broader browser support, positioned container patterns work reliably. Keyboard accessibility, ARIA attributes, viewport collision handling, and touch device support complete production-ready dropdown components.
Frequently asked questions
Is the “Dropdown and Popover Patterns” lesson free?
Yes — the full text of “Dropdown and Popover Patterns” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dropdown and Popover Patterns”?
Create accessible dropdown menus and popovers using CSS positioning and the Popover API. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dropdown and Popover Patterns” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Card Component with CSS Custom Properties
- Modal and Dialog Styling
- Dropdown and Popover Patterns
- Tab Component with :checked Hack vs JS