Responsive Navigation Bar With Multilabel Dropdown using Only HTML & CSS | Dropdown Menu CSS

Navigation Menu | December 10, 2020

This tutorial blog to learn how to create responsive navigation bar with multilabel dropdown using only HTML and CSS.

Video tutorial of Responsive Navigation Bar With Multilabel Dropdown

This tutorial video to learn how to create responsive navigation bar with multilabel dropdown using only HTML and CSS.

You might like this

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery
Create Mobile Friendly Navigation Bar Using HTML CSS and JavaScript | Create Responsive Menu Bar
Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS

Responsive Navigation Bar With Multilabel Dropdown [Source Codes]

This source code can help you to create Responsive Navigation Bar With Multilabel Dropdown

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header id="header"><!--header-start-->
  <div class="container">
    <div class="header_left">
      <a class="logo" href="#"><img src="images/logo.png" alt="logo"></a>
    </div>
    <div class="header_right">
      <label for="menuTrigger" class="nav_ico"><i class="fa fa-bars"></i></label>
      <input id="menuTrigger" type="checkbox" name="">
      <nav class="main_nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Service</a>
            <i class="fa fa-caret-down"></i>
            <ul>
              <li><a href="#">Web Designing</a></li>
              <li><a href="#">Web Development</a></li>
              <li><a href="#">Digital Marketing</a>
                <i class="fa fa-caret-down"></i>
                <ul>
                  <li><a href="#">Service 11</a></li>
                  <li><a href="#">Service 11</a></li>
                  <li><a href="#">Service 11</a>
                    <i class="fa fa-caret-down"></i>
                    <ul>
                      <li><a href="#">Service 111</a></li>
                      <li><a href="#">Service 111</a></li>
                      <li><a href="#">Service 111</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>    
    </div>
    
  </div>
</header><!--header-end-->
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: #e4e4e4 url(../images/banner.jpg) center bottom;
  background-size: cover;
  min-height: 100vh;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}
img{max-width: 100%;}



#header{
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #022335;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.container{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav_ico{
  display: block;
  width: 40px;
  cursor: pointer;
}
.main_nav {
  float: right;
}
.main_nav ul{
  margin: 0;
  padding: 0px;
  list-style: none;
}
.main_nav ul li{
  float: left;
  margin: 0 0 0 5px;
  position: relative;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 300;
  position: relative;
}
.main_nav ul li a {
  color: white;
  display: block;
  line-height: 1.4;
  text-decoration: none;
  padding: 5px 15px;
  transition: all 0.3s ease-out;
}
.main_nav ul li:hover > a{
  color: #0a91da
}
.main_nav ul li i{
  position: absolute;
  right: 0;
  top: 10px;
  color: #fff;
}
.main_nav ul li:hover > i{ color: #0a91da }

.main_nav ul ul{
  position: absolute;
  left: 0;
  top:calc(100% + 15px);
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease-out;
  pointer-events: none;
}
.main_nav ul ul li{
  float: none;
  margin:0;
  border-bottom: 1px solid #fff;
}
.main_nav > ul > li > ul:after{
  content: "";
  position: absolute;
  bottom: 100%;
  height: 16px;
  width: 100%;
  left: 0;
}

.main_nav ul ul ul{
  left: 100%;
  top:0;
}
.main_nav ul li:hover > ul{
  opacity: 1;
  pointer-events: auto;
}
.main_nav ul ul li a{
  background:#022335;
}
.main_nav ul li:hover ul li:hover > a{
  color: #fff;
  background:#0a91da;
}
.main_nav ul ul li i{
  transform: rotate(-90deg);
}
.main_nav ul ul li:hover i{ color: #fff; }




/*This Media Query use for iPad Portrait View*/
@media only screen and (min-width:768px) and (max-width:991px){
  .main_nav ul li{ margin: 0 ; font-size: 16px; }
  .main_nav ul li a{ padding: 5px 10px; }

}

@media screen and (min-width: 768px){
  .nav_ico,
  #menuTrigger{  display: none;} 
}
/*This Media Query use for Mobile View*/
@media screen and (max-width: 767px){
  .nav_ico{ 
    display: block;
    position: relative;
    z-index: 10;
    color: #fff;
    font-size: 36px;

  } 
  .main_nav {
    position: fixed;
    left: 0;
    top: 72px;
    padding:0;
    background: #053e5d;
    z-index: 5;
    height: calc(100vh - 74px);
    overflow: auto;
    width: calc(100% - 80px);
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
  }
  .main_nav ul li {
    float: none;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid;
  }
  .main_nav ul li a {
    display: block;
    color: #fff;
    padding: 10px;
  }
  .main_nav > ul > li:hover > a{
    background:#0a91da;
    color: #fff;
  } 
  .main_nav ul ul{
    position: static;
    pointer-events: auto;
    opacity: 1;
    height: 0;
    overflow: hidden;
  }
  .main_nav ul ul li a{
    padding-left: 30px;
  }
  .main_nav ul ul ul li a{
    padding-left: 60px;
  }
  .main_nav ul ul ul ul li a{
    padding-left: 90px;
  }
  .main_nav ul li:hover > ul {
    height: auto;
  }
  .main_nav ul li i{ right: 10px !important; }
  .main_nav ul li:hover > i{ color: #fff }
  .main_nav ul ul li i{transform: rotate(0deg);}

  #menuTrigger{
    opacity: 0;
    position: fixed;
    width: 0;
    height: 0;
    margin: 0
  }
  #menuTrigger:checked + .main_nav{
    transform: translateX(0%);
  }

  

}