Responsive Drop Down Menu with submenu in HTML & CSS

responsive drop down menu with submenu: You can Learn how to create a responsive drop down menu with submenu demo with example step by step using HTML, CSS and JavaScript source code all the visitors want every part of their online website to look perfect on all the devices like mobile, laptop and Desktop.

responsive drop down menu with submenu Example

Pure HTML and CSS Code for responsive drop down menu with submenu

  • Use Mobile-First Design
  • Reorder Menu Items
  • Use Event Listeners on Mobile and Tablet
  • Choose Between Click and Hover on Desktop
  • Use the a Tag Without the href Attribute for Empty Parent Menu Items
  • Make Icons Available Offline

responsive drop down menu with submenu
responsive drop down menu with submenu

Don’t Miss : Responsive Dropdown Navigation Bar

HTML CODE:

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="heademenu">
      <i class='bx bx-menu'></i>
      <div class="brandlogo"><a href="#">Pakainfo</a></div>
      <div class="nav-relations">
        <div class="sidebar-brandlogo">
          <span class="brandlogo-name">Pakainfo</span>
          <i class='bx bx-x' ></i>
        </div>
        <ul class="relations">
          <li><a href="#">HOME</a></li>
          <li>
            <a href="#">JavaScript</a>
            <i class='bx bxs-chevron-down customWeb-arrow arrow  '></i>
            <ul class="customWeb-child-nav child-nav">
              <li><a href="#">Angular JS</a></li>
              <li><a href="#">Vue JS</a></li>
              <li><a href="#">React JS</a></li>
              <li class="more">
                <span><a href="#">More</a>
                <i class='bx bxs-chevron-right arrow more-arrow'></i>
              </span>
                <ul class="more-child-nav child-nav">
                  <li><a href="#">JSON</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">Ajax</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">PHP</a>
            <i class='bx bxs-chevron-down js-arrow arrow '></i>
            <ul class="js-child-nav child-nav">
              <li><a href="#">Laravel</a></li>
              <li><a href="#">Magento</a></li>
              <li><a href="#">Yii</a></li>
              <li><a href="#">MySQL</a></li>
            </ul>
          </li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </div>
      <div class="custom-search">
        <i class='bx bx-search'></i>
        <div class="input-box">
          <input type="text" placeholder="Search...">
        </div>
      </div>
    </div>
  </nav>
  <script src="script.js"></script>
</body>
</html>

CSS & Magic

style.css

    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', sans-serif;
        }
        body{
          min-height: 100vh;
        }
        nav{
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          height: 70px;
          background: #4885ed;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          z-index: 99;
        }
        nav .heademenu{
          height: 100%;
          max-width: 1250px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: auto;
          padding: 0 50px;
        }
        .heademenu .brandlogo a{
          font-size: 30px;
          color: #fff;
          text-decoration: none;
          font-weight: 600;
        }
        nav .heademenu .nav-relations{
          line-height: 70px;
          height: 100%;
        }
        nav .heademenu .relations{
          display: flex;
        }
        nav .heademenu .relations li{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          list-style: none;
          padding: 0 14px;
        }
        nav .heademenu .relations li a{
          height: 100%;
          text-decoration: none;
          white-space: nowrap;
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
        .relations li:hover .customWeb-arrow,
        .relations li:hover .js-arrow{
          transform: rotate(180deg);
          }

        nav .heademenu .relations li .arrow{
          height: 100%;
          width: 22px;
          line-height: 70px;
          text-align: center;
          display: inline-block;
          color: #fff;
          transition: all 0.3s ease;
        }
        nav .heademenu .relations li .child-nav{
          position: absolute;
          top: 70px;
          left: 0;
          line-height: 40px;
          background: #4885ed;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          border-radius: 0 0 4px 4px;
          display: none;
          z-index: 2;
        }
        nav .heademenu .relations li:hover .customWeb-child-nav,
        nav .heademenu .relations li:hover .js-child-nav{
          display: block;
        }
        .heademenu .relations li .child-nav li{
          padding: 0 22px;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .heademenu .relations li .child-nav a{
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
        .heademenu .relations li .child-nav .more-arrow{
          line-height: 40px;
        }
        .heademenu .relations li .customWeb-more-child-nav{
          /* line-height: 40px; */
        }
        .heademenu .relations li .child-nav .more-child-nav{
          position: absolute;
          top: 0;
          left: 100%;
          border-radius: 0 4px 4px 4px;
          z-index: 1;
          display: none;
        }
        .relations li .child-nav .more:hover .more-child-nav{
          display: block;
        }
        .heademenu .custom-search{
          position: relative;
           height: 40px;
          width: 40px;
        }
        .heademenu .custom-search i{
          position: absolute;
          height: 100%;
          width: 100%;
          line-height: 40px;
          text-align: center;
          font-size: 22px;
          color: #fff;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        .heademenu .custom-search .input-box{
          position: absolute;
          right: calc(100% - 40px);
          top: 80px;
          height: 60px;
          width: 300px;
          background: #4885ed;
          border-radius: 6px;
          opacity: 0;
          pointer-events: none;
          transition: all 0.4s ease;
        }
        .heademenu.showInput .custom-search .input-box{
          top: 65px;
          opacity: 1;
          pointer-events: auto;
          background: #4885ed;
        }
        .custom-search .input-box::before{
          content: '';
          position: absolute;
          height: 20px;
          width: 20px;
          background: #4885ed;
          right: 10px;
          top: -6px;
          transform: rotate(45deg);
        }
        .custom-search .input-box input{
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 4px;
          transform: translate(-50%, -50%);
          height: 35px;
          width: 280px;
          outline: none;
          padding: 0 15px;
          font-size: 16px;
          border: none;
        }
        .heademenu .nav-relations .sidebar-brandlogo{
          display: none;
        }
        .heademenu .bx-menu{
          display: none;
        }
        @media (max-width:920px) {
          nav .heademenu{
            max-width: 100%;
            padding: 0 25px;
          }

          nav .heademenu .brandlogo a{
            font-size: 27px;
          }
          nav .heademenu .relations li{
            padding: 0 10px;
            white-space: nowrap;
          }
          nav .heademenu .relations li a{
            font-size: 15px;
          }
        }
        @media (max-width:800px){
          nav{
            /* position: relative; */
          }
          .heademenu .bx-menu{
            display: block;
          }
          nav .heademenu .nav-relations{
            position: fixed;
            top: 0;
            left: -100%;
            display: block;
            max-width: 270px;
            width: 100%;
            background:  #4885ed;
            line-height: 40px;
            padding: 20px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease;
            z-index: 1000;
          }
          .heademenu .nav-relations .sidebar-brandlogo{
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .sidebar-brandlogo .brandlogo-name{
            font-size: 25px;
            color: #fff;
          }
            .sidebar-brandlogo  i,
            .heademenu .bx-menu{
              font-size: 25px;
              color: #fff;
            }
          nav .heademenu .relations{
            display: block;
            margin-top: 20px;
          }
          nav .heademenu .relations li .arrow{
            line-height: 40px;
          }
        nav .heademenu .relations li{
            display: block;
          }
        nav .heademenu .relations li .child-nav{
          position: relative;
          top: 0;
          box-shadow: none;
          display: none;
        }
        nav .heademenu .relations li .child-nav li{
          border-bottom: none;

        }
        .heademenu .relations li .child-nav .more-child-nav{
          display: none;
          position: relative;
          left: 0;
        }
        .heademenu .relations li .child-nav .more-child-nav li{
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .relations li:hover .customWeb-arrow,
        .relations li:hover .js-arrow{
          transform: rotate(0deg);
          }
          .heademenu .relations li .child-nav .more-child-nav{
            display: none;
          }
          .heademenu .relations li .child-nav .more span{
            /* background: red; */
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
          }

          .relations li .child-nav .more:hover .more-child-nav{
            display: none;
          }
          nav .heademenu .relations li:hover .customWeb-child-nav,
          nav .heademenu .relations li:hover .js-child-nav{
            display: none;
          }
        .heademenu .nav-relations.show1 .relations .customWeb-child-nav,
          .heademenu .nav-relations.show3 .relations .js-child-nav,
          .heademenu .nav-relations.show2 .relations .more .more-child-nav{
              display: block;
            }
            .heademenu .nav-relations.show1 .relations .customWeb-arrow,
            .heademenu .nav-relations.show3 .relations .js-arrow{
                transform: rotate(180deg);
        }
            .heademenu .nav-relations.show2 .relations .more-arrow{
              transform: rotate(90deg);
            }
        }
        @media (max-width:370px){
          nav .heademenu .nav-relations{
          max-width: 100%;
        } 
        }

    </style>

JAVASCRIPT CODE

script.js

<script type="text/javascript">
let heademenu = document.querySelector(".heademenu");
let FindQuery = document.querySelector(".custom-search .bx-search");

FindQuery.addEventListener("click", ()=>{
  heademenu.classList.toggle("showInput");
  if(heademenu.classList.contains("showInput")){
    FindQuery.classList.replace("bx-search" ,"bx-x");
  }else {
    FindQuery.classList.replace("bx-x" ,"bx-search");
  }
});

let navrelations = document.querySelector(".nav-relations");
let menuOpenBtn = document.querySelector(".heademenu .bx-menu");
let menuCloseBtn = document.querySelector(".nav-relations .bx-x");
menuOpenBtn.onclick = function() {
navrelations.style.left = "0";
}
menuCloseBtn.onclick = function() {
navrelations.style.left = "-100%";
}


let customWebArrow = document.querySelector(".customWeb-arrow");
customWebArrow.onclick = function() {
 navrelations.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navrelations.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navrelations.classList.toggle("show3");
}

</script>

Don’t Miss : Menu and submenu in HTML using ul li

Read Also:  Bootstrap On-Off Toggle Switch jQuery Plugins

Drop Down Menu with Sub Menu – Full Source Code

this full source code for “responsive drop down menu with submenu” simply create a new file and then all the source code copy and paste then run your browsers, and last check responsive Drop Down Menu with Sub Menu.
index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', sans-serif;
        }
        body{
          min-height: 100vh;
        }
        nav{
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          height: 70px;
          background: #4885ed;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          z-index: 99;
        }
        nav .heademenu{
          height: 100%;
          max-width: 1250px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: auto;
          padding: 0 50px;
        }
        .heademenu .brandlogo a{
          font-size: 30px;
          color: #fff;
          text-decoration: none;
          font-weight: 600;
        }
        nav .heademenu .nav-relations{
          line-height: 70px;
          height: 100%;
        }
        nav .heademenu .relations{
          display: flex;
        }
        nav .heademenu .relations li{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          list-style: none;
          padding: 0 14px;
        }
        nav .heademenu .relations li a{
          height: 100%;
          text-decoration: none;
          white-space: nowrap;
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
        .relations li:hover .customWeb-arrow,
        .relations li:hover .js-arrow{
          transform: rotate(180deg);
          }

        nav .heademenu .relations li .arrow{
          height: 100%;
          width: 22px;
          line-height: 70px;
          text-align: center;
          display: inline-block;
          color: #fff;
          transition: all 0.3s ease;
        }
        nav .heademenu .relations li .child-nav{
          position: absolute;
          top: 70px;
          left: 0;
          line-height: 40px;
          background: #4885ed;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          border-radius: 0 0 4px 4px;
          display: none;
          z-index: 2;
        }
        nav .heademenu .relations li:hover .customWeb-child-nav,
        nav .heademenu .relations li:hover .js-child-nav{
          display: block;
        }
        .heademenu .relations li .child-nav li{
          padding: 0 22px;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .heademenu .relations li .child-nav a{
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
        .heademenu .relations li .child-nav .more-arrow{
          line-height: 40px;
        }
        .heademenu .relations li .customWeb-more-child-nav{
          /* line-height: 40px; */
        }
        .heademenu .relations li .child-nav .more-child-nav{
          position: absolute;
          top: 0;
          left: 100%;
          border-radius: 0 4px 4px 4px;
          z-index: 1;
          display: none;
        }
        .relations li .child-nav .more:hover .more-child-nav{
          display: block;
        }
        .heademenu .custom-search{
          position: relative;
           height: 40px;
          width: 40px;
        }
        .heademenu .custom-search i{
          position: absolute;
          height: 100%;
          width: 100%;
          line-height: 40px;
          text-align: center;
          font-size: 22px;
          color: #fff;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        .heademenu .custom-search .input-box{
          position: absolute;
          right: calc(100% - 40px);
          top: 80px;
          height: 60px;
          width: 300px;
          background: #4885ed;
          border-radius: 6px;
          opacity: 0;
          pointer-events: none;
          transition: all 0.4s ease;
        }
        .heademenu.showInput .custom-search .input-box{
          top: 65px;
          opacity: 1;
          pointer-events: auto;
          background: #4885ed;
        }
        .custom-search .input-box::before{
          content: '';
          position: absolute;
          height: 20px;
          width: 20px;
          background: #4885ed;
          right: 10px;
          top: -6px;
          transform: rotate(45deg);
        }
        .custom-search .input-box input{
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 4px;
          transform: translate(-50%, -50%);
          height: 35px;
          width: 280px;
          outline: none;
          padding: 0 15px;
          font-size: 16px;
          border: none;
        }
        .heademenu .nav-relations .sidebar-brandlogo{
          display: none;
        }
        .heademenu .bx-menu{
          display: none;
        }
        @media (max-width:920px) {
          nav .heademenu{
            max-width: 100%;
            padding: 0 25px;
          }

          nav .heademenu .brandlogo a{
            font-size: 27px;
          }
          nav .heademenu .relations li{
            padding: 0 10px;
            white-space: nowrap;
          }
          nav .heademenu .relations li a{
            font-size: 15px;
          }
        }
        @media (max-width:800px){
          nav{
            /* position: relative; */
          }
          .heademenu .bx-menu{
            display: block;
          }
          nav .heademenu .nav-relations{
            position: fixed;
            top: 0;
            left: -100%;
            display: block;
            max-width: 270px;
            width: 100%;
            background:  #4885ed;
            line-height: 40px;
            padding: 20px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease;
            z-index: 1000;
          }
          .heademenu .nav-relations .sidebar-brandlogo{
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .sidebar-brandlogo .brandlogo-name{
            font-size: 25px;
            color: #fff;
          }
            .sidebar-brandlogo  i,
            .heademenu .bx-menu{
              font-size: 25px;
              color: #fff;
            }
          nav .heademenu .relations{
            display: block;
            margin-top: 20px;
          }
          nav .heademenu .relations li .arrow{
            line-height: 40px;
          }
        nav .heademenu .relations li{
            display: block;
          }
        nav .heademenu .relations li .child-nav{
          position: relative;
          top: 0;
          box-shadow: none;
          display: none;
        }
        nav .heademenu .relations li .child-nav li{
          border-bottom: none;

        }
        .heademenu .relations li .child-nav .more-child-nav{
          display: none;
          position: relative;
          left: 0;
        }
        .heademenu .relations li .child-nav .more-child-nav li{
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .relations li:hover .customWeb-arrow,
        .relations li:hover .js-arrow{
          transform: rotate(0deg);
          }
          .heademenu .relations li .child-nav .more-child-nav{
            display: none;
          }
          .heademenu .relations li .child-nav .more span{
            /* background: red; */
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
          }

          .relations li .child-nav .more:hover .more-child-nav{
            display: none;
          }
          nav .heademenu .relations li:hover .customWeb-child-nav,
          nav .heademenu .relations li:hover .js-child-nav{
            display: none;
          }
        .heademenu .nav-relations.show1 .relations .customWeb-child-nav,
          .heademenu .nav-relations.show3 .relations .js-child-nav,
          .heademenu .nav-relations.show2 .relations .more .more-child-nav{
              display: block;
            }
            .heademenu .nav-relations.show1 .relations .customWeb-arrow,
            .heademenu .nav-relations.show3 .relations .js-arrow{
                transform: rotate(180deg);
        }
            .heademenu .nav-relations.show2 .relations .more-arrow{
              transform: rotate(90deg);
            }
        }
        @media (max-width:370px){
          nav .heademenu .nav-relations{
          max-width: 100%;
        } 
        }

    </style>
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="heademenu">
      <i class='bx bx-menu'></i>
      <div class="brandlogo"><a href="#">Pakainfo</a></div>
      <div class="nav-relations">
        <div class="sidebar-brandlogo">
          <span class="brandlogo-name">Pakainfo</span>
          <i class='bx bx-x' ></i>
        </div>
        <ul class="relations">
          <li><a href="#">HOME</a></li>
          <li>
            <a href="#">JavaScript</a>
            <i class='bx bxs-chevron-down customWeb-arrow arrow  '></i>
            <ul class="customWeb-child-nav child-nav">
              <li><a href="#">Angular JS</a></li>
              <li><a href="#">Vue JS</a></li>
              <li><a href="#">React JS</a></li>
              <li class="more">
                <span><a href="#">More</a>
                <i class='bx bxs-chevron-right arrow more-arrow'></i>
              </span>
                <ul class="more-child-nav child-nav">
                  <li><a href="#">JSON</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">Ajax</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">PHP</a>
            <i class='bx bxs-chevron-down js-arrow arrow '></i>
            <ul class="js-child-nav child-nav">
              <li><a href="#">Laravel</a></li>
              <li><a href="#">Magento</a></li>
              <li><a href="#">Yii</a></li>
              <li><a href="#">MySQL</a></li>
            </ul>
          </li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </div>
      <div class="custom-search">
        <i class='bx bx-search'></i>
        <div class="input-box">
          <input type="text" placeholder="Search...">
        </div>
      </div>
    </div>
  </nav>
<script type="text/javascript">
let heademenu = document.querySelector(".heademenu");
let FindQuery = document.querySelector(".custom-search .bx-search");

FindQuery.addEventListener("click", ()=>{
  heademenu.classList.toggle("showInput");
  if(heademenu.classList.contains("showInput")){
    FindQuery.classList.replace("bx-search" ,"bx-x");
  }else {
    FindQuery.classList.replace("bx-x" ,"bx-search");
  }
});

let navrelations = document.querySelector(".nav-relations");
let menuOpenBtn = document.querySelector(".heademenu .bx-menu");
let menuCloseBtn = document.querySelector(".nav-relations .bx-x");
menuOpenBtn.onclick = function() {
navrelations.style.left = "0";
}
menuCloseBtn.onclick = function() {
navrelations.style.left = "-100%";
}


let customWebArrow = document.querySelector(".customWeb-arrow");
customWebArrow.onclick = function() {
 navrelations.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navrelations.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navrelations.classList.toggle("show3");
}

</script>
</body>
</html>

Don’t Miss : jQuery mobile hamburger menu

I hope you get an idea about responsive drop down menu with submenu.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.