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
Selected Reading
How to create a responsive navigation bar with dropdown in CSS?
A responsive navigation bar with dropdown adapts to different screen sizes while providing organized menu options. The dropdown menu reveals additional links when users hover over specific menu items, and the entire navigation transforms into a mobile-friendly hamburger menu on smaller screens.
Syntax
/* Basic Navigation Structure */
nav {
background-color: color;
width: 100%;
}
/* Dropdown Container */
.dropdown-menu {
position: relative;
display: inline-block;
}
/* Media Query for Responsiveness */
@media screen and (max-width: breakpoint) {
/* Responsive styles */
}
Basic Navigation Styling
First, we style the navigation container and links. The navigation menu uses a dark teal background with white text links −
nav {
background-color: #017575;
width: 100%;
}
.links, .links-hidden {
display: inline-block;
color: white;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 20px;
}
.links:hover, .links-hidden:hover {
background-color: #3e8e41;
}
Dropdown Menu Structure
The dropdown consists of a button that reveals hidden menu items on hover −
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #017575;
min-width: 160px;
z-index: 1;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #3e8e41;
}
Mobile Responsiveness
Media queries hide navigation links on smaller screens and show a hamburger menu instead −
@media screen and (max-width: 880px) {
nav a:not(:first-child) {
display: none;
}
nav a.hamburger {
float: right;
display: block;
padding: 12px;
}
.dropdown-menu {
display: none;
}
nav.openNav a {
float: none;
display: block;
text-align: center;
}
}
Complete Example
Here's a fully functional responsive navigation bar with dropdown functionality −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
background-color: #017575;
width: 100%;
overflow: hidden;
}
.links, .links-hidden {
display: inline-block;
color: white;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 20px;
}
.links:hover, .links-hidden:hover {
background-color: #3e8e41;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-btn {
font-size: 18px;
font-weight: bold;
background-color: #017575;
color: white;
padding: 20px;
border: none;
cursor: pointer;
}
.menu-content {
display: none;
position: absolute;
background-color: #017575;
min-width: 160px;
z-index: 1;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #3e8e41;
}
.hamburger {
color: white;
font-size: 24px;
display: none;
float: right;
padding: 20px;
cursor: pointer;
}
@media screen and (max-width: 880px) {
nav a:not(.hamburger) {
display: none;
}
.dropdown-menu {
display: none;
}
.hamburger {
display: block;
}
nav.openNav a {
float: none;
display: block;
text-align: center;
}
nav.openNav .dropdown-menu {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<nav id="myNav">
<a class="links" href="#">HOME</a>
<a class="links" href="#">EMPLOYEES</a>
<a class="links" href="#">CAREER</a>
<a class="links" href="#">HISTORY</a>
<a class="links" href="#">FUNDING</a>
<div class="dropdown-menu">
<button class="menu-btn">MORE ?</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
<span class="hamburger" onclick="toggleNav()">?</span>
</nav>
<div style="padding: 20px;">
<h2>Responsive Navigation Demo</h2>
<p>Resize the browser window to see the responsive behavior. On smaller screens, the navigation converts to a hamburger menu.</p>
</div>
<script>
function toggleNav() {
var nav = document.getElementById("myNav");
if (nav.className === "") {
nav.className = "openNav";
} else {
nav.className = "";
}
}
</script>
</body>
</html>
A horizontal navigation bar appears with menu items (HOME, EMPLOYEES, CAREER, etc.) and a "MORE" dropdown button. Hovering over "MORE" reveals Contact Us, Visit Us, and About Us options. When the browser width is reduced below 880px, the navigation transforms into a hamburger menu (?) that toggles the mobile menu when clicked.
Conclusion
Responsive navigation bars with dropdowns provide excellent user experience across all devices. The combination of CSS hover effects, media queries, and JavaScript creates a professional navigation system that adapts seamlessly from desktop to mobile.
Updated on: 2026-03-15T14:20:21+05:30
2K+ Views
Advertisements