CSS TutorialLesson 35Free preview

CSS Dropdowns

This lesson is part of CSS · All levels

Summary

Dropdown is made by hiding the list menu, for example with visibility: hidden, and then displaying it when the visitor directs the cursor to its parent element via:hover. The menu container uses position: relative and the menu uses position: absolute to appear attached under the trigger button. Modern dropdowns can also be activated via keyboard focus for accessibility.

Key points

The dropdown menu is hidden with visibility: hidden or display: none on the absolute menu.
When the parent is hovered, the menu state is changed to visible.
The container uses position: relative, the menu uses position: absolute with the top and left corresponding.
Sort <a> with display: block makes the menu line neat and wide.
The trigger button is easy to press and the menu should also be accessible via the keyboard focus.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.