How To Create a Dropdown Menu
Learn how to make a button that opens a small list of links underneath it.
Step 1: The HTML
A wrapper <div> holds the button and the hidden menu.
Example
html
<div class="dropdown">
<button class="drop-btn" id="dropBtn">Courses ▾</button>
<div class="drop-menu" id="dropMenu">
<a href="#">Web Development</a>
<a href="#">Graphic Design</a>
<a href="#">Digital Marketing</a>
</div>
</div>Step 2: The CSS
The wrapper is position: relative, so the menu can be placed exactly under the button with position: absolute. The menu is hidden until it has the show class.
Example
css
.dropdown { position: relative; display: inline-block; }
.drop-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 190px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.drop-menu.show { display: block; }
.drop-menu a { display: block; padding: 10px 14px; color: #333; text-decoration: none; }
.drop-menu a:hover { background: #ecfdf5; }Step 3: The JavaScript
Clicking the button toggles the menu. Clicking anywhere else on the page closes it.
Example
javascript
const btn = document.getElementById("dropBtn");
const menu = document.getElementById("dropMenu");
btn.addEventListener("click", function (event) {
event.stopPropagation();
menu.classList.toggle("show");
});
document.addEventListener("click", function () {
menu.classList.remove("show");
});event.stopPropagation() stops the button's click from also reaching the document, which would close the menu straight away.
The Complete Example
Example
html
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.dropdown { position: relative; display: inline-block; }
.drop-btn { background: #059669; color: white; border: none; padding: 10px 16px; font-size: 16px; border-radius: 6px; cursor: pointer; }
.drop-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 190px; background: white; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10; }
.drop-menu.show { display: block; }
.drop-menu a { display: block; padding: 10px 14px; color: #333; text-decoration: none; }
.drop-menu a:hover { background: #ecfdf5; }
</style>
</head>
<body>
<div class="dropdown">
<button class="drop-btn" id="dropBtn">Courses ▾</button>
<div class="drop-menu" id="dropMenu">
<a href="#">Web Development</a>
<a href="#">Graphic Design</a>
<a href="#">Digital Marketing</a>
</div>
</div>
<p id="note">Click the button, then click outside to close the menu.</p>
<script>
const btn = document.getElementById("dropBtn");
const menu = document.getElementById("dropMenu");
btn.addEventListener("click", function (event) {
event.stopPropagation();
menu.classList.toggle("show");
});
document.addEventListener("click", function () {
menu.classList.remove("show");
});
</script>
</body>
</html>A Hover Dropdown with Only CSS
On desktop sites, menus often open on hover. You can do that without JavaScript:
Example
css
.dropdown:hover .drop-menu { display: block; }| Click dropdown | Hover dropdown |
|---|---|
| Works on phones and laptops | Phones have no hover, so it is hard to use |
| Needs a little JavaScript | Pure CSS |
Prefer click dropdowns for important menus, because touch screens cannot hover.
Exercise
Exercise
Why is the wrapper given position: relative?