Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a dropdown navigation bar with CSS?
A dropdown navigation bar is a nav bar that contains dropdown options. You will see many websites where certain navigation items have dropdown features to organize multiple related links.
When there are multiple options to render under the same category, you need to develop a dropdown navigation bar. For example, if you provide multiple types of services, instead of displaying all of them openly on the nav bar, you can organize them in a dropdown menu. This is similar to a hoverable dropdown menu.
Syntax
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-menu:hover .dropdown-content {
display: block;
}
Steps to Create a Dropdown Navbar
Step 1 − Add HTML Structure:
We will create a navigation bar structure using HTML and include Font Awesome icons for the dropdown indicator. To learn about including icon packages, check this article.
- Use the HTML <nav> tag to wrap all menu items
- Create dropdown structure using <div> elements with proper classes
- Use <button> for the dropdown trigger and <a> tags for menu links
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Products</a>
<div class="dropdown-menu">
<button class="dropdown-btn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Contact Us</a>
<a href="#">Visit Us</a>
<a href="#">About Us</a>
</div>
</div>
</nav>
</body>
</html>
Step 2 − Add CSS Styling:
Style the navigation bar and implement the dropdown functionality using CSS:
- Use display: inline-block to keep navigation items horizontal
- Use display: none to initially hide dropdown content
- Use position: absolute to position dropdown below the trigger
- Use z-index to ensure dropdown appears above other elements
Complete Example
The following example demonstrates a complete dropdown navigation bar with hover effects −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
nav {
background-color: #333;
padding: 0;
overflow: hidden;
}
.nav-link, .dropdown-btn {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: transparent;
border: none;
font-size: 16px;
cursor: pointer;
}
.nav-link:hover, .dropdown-btn:hover {
background-color: #575757;
}
.dropdown-menu {
float: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
top: 100%;
left: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-menu:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Products</a>
<div class="dropdown-menu">
<button class="dropdown-btn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Contact Us</a>
<a href="#">Visit Us</a>
<a href="#">About Us</a>
</div>
</div>
</nav>
</body>
</html>
A horizontal navigation bar with dark background appears. The navigation contains "Home", "Services", "Products" links and a "More" dropdown button with a down arrow. When hovering over "More", a dropdown menu appears with "Contact Us", "Visit Us", and "About Us" options.
Conclusion
Creating a dropdown navigation bar involves structuring HTML with proper nesting and using CSS to control visibility and positioning. The key is using :hover pseudo-selector to show hidden dropdown content when users interact with the trigger element.
16K+ Views
