Last updated: March 13, 2026
How to Create a Dropdown Menu with Pure CSS
The complete guide to CSS-only dropdown menus. Learn hover, focus-within, and checkbox toggle methods with live demos and accessible code.
Why CSS-Only Dropdowns?
CSS-only dropdowns work without JavaScript, load faster, and are more reliable. They're perfect for navigation menus, user account menus, and simple select-style components.
No JavaScript
Works immediately, even if JS fails to load or is disabled by the user.
Better Performance
No event listeners or DOM manipulation. Pure CSS is faster and uses less memory.
Simpler Code
No state management, no component lifecycle. Just HTML and CSS.
Method Comparison
Choose the right dropdown method based on your project requirements.
| Method | Mobile | Keyboard | No JS | Browser Support |
|---|---|---|---|---|
| Hover | No | No | Yes | 100% |
| Focus-withinRecommended | Yes | Yes | Yes | 97%+ |
| Checkbox | Yes | Yes | Yes | 100% |
Hover
Focus-withinRecommended
Checkbox
Hover-based Dropdown (Simple)
The simplest CSS-only dropdown using :hover on the parent element. The menu shows when hovering over the trigger, with smooth transitions.
Live Preview
- Profile
- Settings
- Logout
Full Code
Pros
- +Simplest implementation
- +No JavaScript required
- +Smooth animations with CSS transitions
- +100% browser support
- +Works immediately on page load
Cons
- -Not accessible for keyboard users
- -Doesn't work on touch devices
- -Can close unexpectedly when moving mouse
- -Not suitable for mobile-first sites
When to Use
- *Desktop-only navigation menus
- *Quick prototypes and demos
- *When hover behavior is explicitly desired
- *Simple internal tools or admin panels
Focus-within Dropdown (Accessible)
RecommendedUses the :focus-within pseudo-class for better accessibility. The dropdown opens when the trigger button receives focus, making it keyboard accessible.
Pros
- +Keyboard accessible (Tab to open)
- +Works on touch devices (tap to focus)
- +No JavaScript required
- +Combines hover and focus for best of both
- +Meets basic accessibility requirements
Cons
- -97% browser support (no IE11)
- -Closes when clicking outside (may need JS)
- -Tab order must be considered
- -May close unexpectedly in some edge cases
When to Use
- *Production navigation menus
- *Accessibility-conscious projects
- *When keyboard navigation is required
- *Mobile-responsive websites
Checkbox Toggle Dropdown
Uses a hidden checkbox input to toggle the dropdown state. This creates a true click-to-toggle behavior without JavaScript, perfect for mobile devices.
Live Preview
- Profile
- Settings
- Logout
Full Code
Pros
- +True click-to-toggle behavior
- +Works perfectly on mobile (tap to toggle)
- +100% browser support
- +Stays open until clicked again
- +No JavaScript required
Cons
- -Doesn't close when clicking outside
- -Uses label/checkbox hack (semantic concerns)
- -Need unique IDs for multiple dropdowns
- -Slightly more complex HTML structure
When to Use
- *Mobile hamburger menus
- *When toggle behavior is required
- *Touch-first interfaces
- *When JavaScript must be avoided
Styling Tips
Positioning the Dropdown
Use position: relative on the parent and position: absolute on the menu. Set top: 100% to position below the trigger.
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
}Arrow/Triangle Pointing Up
Create an arrow using ::before pseudo-element with CSS borders. Position it at the top center of the dropdown.
.dropdown-menu::before {
content: '';
position: absolute;
top: -8px;
left: 20px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
}Shadow and Border Styling
Add depth with box-shadow and subtle borders. Use border-radius for modern rounded corners.
.dropdown-menu {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1),
0 2px 4px rgba(0,0,0,0.05);
}Multi-level Dropdowns
Nest dropdowns by positioning child menus to the right with left: 100%. Add hover states to show nested menus.
.dropdown-menu .has-submenu {
position: relative;
}
.dropdown-menu .submenu {
position: absolute;
top: 0;
left: 100%;
opacity: 0;
visibility: hidden;
}
.has-submenu:hover .submenu {
opacity: 1;
visibility: visible;
}Accessibility Best Practices
While pure CSS dropdowns can be accessible, adding ARIA attributes and keyboard support often requires minimal JavaScript. Here's what you need to know:
ARIA Attributes
Use aria-expanded, aria-haspopup, and aria-controls for screen reader support.
<button aria-expanded="false" aria-haspopup="true" aria-controls="dropdown-menu" > Menu </button> <ul id="dropdown-menu" role="menu"> <li role="menuitem">...</li> </ul>
Keyboard Navigation
Ensure Tab, Enter, Escape, and Arrow keys work. This typically requires minimal JavaScript.
/* CSS for focus states */
.dropdown-menu li a:focus {
background: #f3f4f6;
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
/* JS for Escape key to close */
dropdown.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDropdown();
});Focus Management
When dropdown opens, move focus to the first menu item. Return focus to trigger when closed.
/* Trap focus within dropdown */
.dropdown-menu:focus-within {
/* Menu stays open */
}
/* First item should be focusable */
.dropdown-menu li:first-child a {
/* Auto-focus when opened */
}Frequently Asked Questions
For most production websites, use the focus-within method as it provides both hover and keyboard accessibility. Use the checkbox method for mobile hamburger menus where toggle behavior is needed. Only use pure hover for desktop-only prototypes or internal tools.
Use either the focus-within method (tap to focus opens the menu) or the checkbox toggle method (tap to toggle). Pure hover-based dropdowns don't work on touch devices because there's no hover event on mobile.
Yes! Use nested position: relative/absolute containers with left: 100% for submenus. However, multi-level dropdowns on mobile are tricky with pure CSS - you may need JavaScript for a good UX on touch devices.
Pure CSS can't detect clicks outside an element. The focus-within method closes when focus leaves the dropdown. For the checkbox method, you'll need a small amount of JavaScript to uncheck when clicking outside.
Use aria-expanded (true/false) on the trigger button, aria-haspopup="true" to indicate a popup exists, aria-controls pointing to the menu's ID, role="menu" on the dropdown list, and role="menuitem" on each option. Also ensure keyboard navigation with Tab, Enter, and Escape keys.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons