Learn how to create a responsive navigation bar with dropdown menu using HTML and CSS

Responsive Navigation Bar With Dropdown Menu Using HTML CSS

This Responsive Navigation Bar is built using HTML and CSS to create a modern website navigation system with dropdown menu functionality. The design features a clean layout, smooth hover effects, and responsive behavior that improves website navigation and user experience across all devices.

The project uses pure CSS techniques to create dropdown menus and responsive navigation without relying on JavaScript frameworks. The navigation bar adapts perfectly to desktops, tablets, and mobile devices while maintaining a professional appearance suitable for portfolios, business websites, and modern web applications.

Steps to Create a Responsive Navigation Bar With Dropdown Menu

Follow these simple steps to build a modern navbar with dropdown functionality:

1. Create a project folder, for example, responsive-navbar-dropdown-menu.
2. Inside the folder, create two files: index.html and style.css.
3. Design the navigation bar structure using HTML.
4. Add navigation links and create dropdown menu sections.

                            
                                <nav class="navbar">
<div class="nav-container">
<div class="logo"><img src="tpslogo.jpg" alt="" width="50px"></div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a href="#">Services </a>
<ul class="dropdown-menu">
<li><a href="#">Web Development</a></li>
<li><a href="#">UI/UX Development</a></li>
<li><a href="#">SEO Optimization</a></li>
<li><a href="#">Digital Marketing</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Portfolio </a>
<ul class="dropdown-menu">
<li><a href="#">Projects</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Clients</a></li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
<li><a class="nav-btn" href="#">Get Started</a></li>
</ul>
</div>
</nav>
<section class="hero">
<div class="content">
<h1>Modern Navigation Bar</h1>
<p>Reponsive navigation bar with smooth dropdown menu, elegant blue gradient theme, modern hover effects, and professional layout using pure HTML &amp; CSS.</p>
</div>
</section>
                            
                        

Apply custom CSS styling to design the navbar layout and menu appearance. Create hover dropdown effects using CSS transitions and positioning. Add responsive design techniques to support all screen sizes. Save the files and open the project in a browser to test the final navigation menu.

                            
                                <style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background: #f4f7fb;
    overflow-x: hidden;
}
/* Navbar  */
.navbar{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    background: rgba(15,23,42,0.75);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 40px;
    transition: 0.5s ease;
}
.nav-container{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
/* logo  */
.logo img{
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
}
.logo img:hover{
    transform: scale(1.08);
}
/* nav links  */
.nav-links{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 35px;
}
.nav-links li{
    position: relative;
}
.nav-links a{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: .5s ease;
    position: relative;
}
/* underline wave  */
.nav-links a::after{
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -6px;

    background: #00d4ff;
    transition: 0.4s;
}
.nav-links a:hover::after{
    width: 100%;
}
.nav-links a:hover{
    color: #00d4ff;
}
/* dropdown  */
.dropdown-menu{
    position: absolute;
    top: 55px;
    left: 0;
    width: 240px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: 0.35s ease;
}
.dropdown-menu li{
    list-style: none;
}
.dropdown-menu a{
    display: block;
    padding: 15px 20px;
    color: #1e293b;
    font-weight: 500;
    transition: 0.3s;
}
.dropdown-menu a:hover{
    background: #eff6ff;
    color: #2563eb;
    padding-left: 28px;
}
.dropdown:hover .dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* button  */
.nav-btn{
    background: linear-gradient(135deg,#00d4ff,#2563eb);
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(37,99,235,0.3);
    transition: 0.4s ease !important;
}
.nav-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(37,99,235,0.45);
}
.nav-btn::after{
    display: none;
}
/* hero section  */
.hero{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(rgba(0,0,0,0.1) , rgba(0,0,0,0.3)) , url(banner.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
.content{
    max-width: 800px;
    padding: 50px;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    animation: fadeup 1s ease;
}
.hero h1{
    font-size: 50px;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.2;
}
.hero p{
    font-size: 18px;
    color: #e2e8f0;
    line-height: 1.9;
}
/* animations  */
@keyframes fadeup {
    from{
        opacity: 0;
        transform: translateY(40px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
/* responsive  */

@media (max-width:768px) {
    .navbar{
        padding: 0 20px;
    }
    .nav-container{
        flex-direction: column;
        height: auto;
        padding: 20px 0;
    }
    .nav-links{
        flex-direction: column;
        width: 100%;
        gap: 20px;
        margin-top: 20px;
    }
    .dropdown-menu{
        position: static;
        width: 100%;
        margin-top: 12px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .dropdown:hover .dropdown-menu{
        display: block;
    }
    .hero h1{
        font-size: 42px;
    }
    .content{
        padding: 30px;
    }
}
</style>
                            
                        

Download Code Files