CSS Dropdown
What is a CSS Dropdown?
A CSS Dropdown is a menu that displays additional links or options when a user hovers over or interacts with an element. Dropdown menus are commonly used in navigation bars to organize multiple pages under a single menu item. CSS can create dropdown menus without using JavaScript by using properties such as position, display, and the :hover pseudo-class.
Why Use CSS Dropdown?
Dropdown menus save space, organize navigation links, improve the user experience, and make websites easier to navigate. They are commonly used in business websites, e-commerce stores, blogs, dashboards, and portfolio websites.
Basic Dropdown Structure
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown{
position:relative;
}
</style>
</head>
<body>
<div class="dropdown">
Dropdown Menu
</div>
</body>
</html>Step 1: Create the Dropdown Button
First, create a button that users will hover over to display the dropdown menu.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 20px;
background:#007BFF;
color:white;
border:none;
cursor:pointer;
}
</style>
</head>
<body>
<button>
Menu
</button>
</body>
</html>Step 2: Create the Hidden Menu
Place the dropdown links inside a container and hide them using display:none.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown{
position:relative;
display:inline-block;
}
.content{
display:none;
position:absolute;
background:#f9f9f9;
min-width:180px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="dropdown">
<button>Menu</button>
<div class="content">
<a href="#">Home</a>
</div>
</div>
</body>
</html>Step 3: Show the Menu on Hover
Use the :hover pseudo-class to display the dropdown menu when the user moves the mouse over the button.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown{
position:relative;
display:inline-block;
}
button{
padding:12px 20px;
background:#007BFF;
color:white;
border:none;
}
.content{
display:none;
position:absolute;
background:white;
min-width:180px;
border:1px solid #ccc;
}
.dropdown:hover .content{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>Menu</button>
<div class="content">
<a href="#">Home</a><br>
<a href="#">About</a><br>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>Step 4: Style the Dropdown Links
Add padding, colors, and hover effects to make the dropdown menu look more attractive.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown{
position:relative;
display:inline-block;
}
button{
padding:12px 20px;
background:#007BFF;
color:white;
border:none;
}
.content{
display:none;
position:absolute;
background:white;
min-width:180px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.content a{
display:block;
padding:12px;
color:black;
text-decoration:none;
}
.content a:hover{
background:#007BFF;
color:white;
}
.dropdown:hover .content{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>Services</button>
<div class="content">
<a href="#">Web Design</a>
<a href="#">SEO</a>
<a href="#">Hosting</a>
</div>
</div>
</body>
</html>Step 5: Create a Navigation Dropdown
Dropdown menus are commonly placed inside navigation bars to organize multiple links under a single menu item.
<!DOCTYPE html>
<html>
<head>
<style>
nav{
background:#222;
padding:15px;
}
.dropdown{
display:inline-block;
position:relative;
}
.dropbtn{
color:white;
text-decoration:none;
padding:10px 15px;
}
.menu{
display:none;
position:absolute;
background:white;
min-width:170px;
}
.menu a{
display:block;
padding:12px;
color:black;
text-decoration:none;
}
.menu a:hover{
background:#007BFF;
color:white;
}
.dropdown:hover .menu{
display:block;
}
</style>
</head>
<body>
<nav>
<div class="dropdown">
<a href="#" class="dropbtn">Products</a>
<div class="menu">
<a href="#">Laptop</a>
<a href="#">Mobile</a>
<a href="#">Tablet</a>
</div>
</div>
</nav>
</body>
</html>Complete CSS Dropdown Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
}
.dropdown{
display:inline-block;
position:relative;
}
button{
background:#007BFF;
color:white;
padding:12px 20px;
border:none;
cursor:pointer;
}
.menu{
display:none;
position:absolute;
min-width:180px;
background:white;
box-shadow:0 5px 12px rgba(0,0,0,.2);
}
.menu a{
display:block;
padding:12px;
color:black;
text-decoration:none;
}
.menu a:hover{
background:#007BFF;
color:white;
}
.dropdown:hover .menu{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>Tutorials</button>
<div class="menu">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Python</a>
</div>
</div>
</body>
</html>Advantages of CSS Dropdown
Best Practices
- Use position:relative for the dropdown container.
- Hide the dropdown menu initially with display:none.
- Display the menu using the :hover pseudo-class.
- Use clear spacing and readable colors for menu items.
- Add hover effects to improve user interaction.
- Keep dropdown menus simple and well organized.
- Ensure dropdown menus are easy to use on different screen sizes.
- Use JavaScript only when advanced dropdown behavior is required.
Web Resources on CSS Dropdown
1. MDN Web Docs : Customizable select elements
2. CSS Tricks.com : Abusing Customizable Selects
3. CSS Tricks.com : Solved with CSS! Dropdown Menus
4. Dev.to : Dropdown menu with HTML and CSS
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.