MenusLesson 37Free preview

Hover Dropdowns

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Hover Dropdown Menu using pure HTML and CSS without the need for JavaScript. This menu automatically pops up a list box of options when the user cursor hovers over the trigger button.

Key points

Container of buttons and dropdowns using position: relative and display: inline-block
The menu list is given position: absolute and display: none by default
Pseudo-class:hover on the container (.dropdown:hover .dropdown-content) converts the display to block
Add elegant box shadows and a high z-index to make the menu float smoothly over other content

Full lesson

Code examples and quizzes

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