Menu
Components & UI
CSS Dropdowns
Reveal content on hover.
1Hover Dropdown
Show a hidden submenu when hovering parent.
Example Code
css
.dropdown-content {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-content {
display: block;
}2Understand it in a real interface
A dropdown is an interaction pattern, not simply an absolutely positioned box. A hover-only panel may be unavailable to touch and keyboard users. Navigation choices generally remain links, while a trigger that expands the choices should be an appropriately labeled button.
3Try it yourself
Build a trigger and a short list of destinations. Make the expanded state visible and test the list with keyboard input. Check what happens near the right edge of the screen and how the visitor dismisses the panel. Keep important destinations discoverable.
Finished reading?
Mark this topic as complete to track progress.