Quiz Entry - updated: 2026.07.14
How do you make a dropdown menu with W3.CSS?
Wrap a button and a w3-dropdown-content menu in w3-dropdown-hover for a pure-CSS hover menu, or w3-dropdown-click when you want a JavaScript-toggled click menu.
Hover dropdown:
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Key classes:
| Class | Purpose |
|---|---|
w3-dropdown-hover |
Container, shows content on hover |
w3-dropdown-click |
Container, requires JS to toggle |
w3-dropdown-content |
The dropdown menu itself |
w3-bar-block |
Stacks items vertically |
Note: w3-dropdown-hover requires no JavaScript - pure CSS solution.