Press "Enter" to skip to content

Responsive Pure Drop Down Menu With Submenu using HTML & CSS

Pure Dropdown is CSS-only, responsive dropdown navigation that reveals submenu items on hover (desktop) or clicks (tablet and mobile).

responsive drop down menu with submenu, create a basic navbar with a dropdown and search bar, responsive navbar with dropdown, responsive navbar html css only, responsive navigation menu css

How to make use of it:

1. Create a navigation menu for the navigation dropdown. Note that this example uses Font Awesome for the dropdown icon.

<nav id="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      Services <i class="fas fa-angle-down"></i>
      <ul>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">Website Design</a></li>
        <li><a href="#">Mobile Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li>
      Blog <i class="fas fa-angle-down"></i>
      <ul>
        <li><a href="#">HTML</a> <span>22 Posts</span></li>
        <li><a href="#">CSS</a> <span>16 Posts</span></li>
        <li><a href="#">JavaScript</a> <span>10 Posts</span></li>
        <li><a href="#">Python</a> <span>13 Posts</span></li>
        <li><a href="#">PHP</a> <span>10 Posts</span></li>
        <li><a href="#">Design</a> <span>21 Posts</span></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

2. Main CSS Styles for Dropdown Navigation.

:root {
  --primary-color: #344a72;
  --secondary-color: chocolate;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f8f8f8;
}

#navbar ul {
  list-style: none;
}

#navbar ul li {
  color: #333;
  display: inline-block;
  padding: 1rem;
  position: relative;
}

#navbar ul li a {
  color: #333;
  text-decoration: none;
}

/* Hide Nested ul By Default */

#navbar ul li ul {
  display: none;
}

#navbar ul li:hover {
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
}

#navbar ul li:hover a {
  color: #fff;
}

/* Nested Dropdown Show */

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  left: 0;
  width: 200px;
  margin-top: 1rem;
}

#navbar ul li:hover ul li {
  display: block;
  background: #e7e7e7;
}

#navbar ul li:hover ul li a {
  color: #333;
}

#navbar ul li:hover ul li:hover {
  background: #e0e0e0;
  color: inherit;
}

#navbar ul li:hover ul li span {
  float: right;
  color: #fff;
  background: var(--primary-color);
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 5px;
}

#navbar ul li:hover ul li:hover span {
  background: var(--secondary-color);
}

#navbar ul li:first-child {
  background-color: var(--primary-color);
}

#navbar ul li:first-child a {
  color: #fff;
}

3. Make it fully responsive with CSS media queries.

@media (max-width: 600px) {
  #navbar ul li {
    display: block;
  }

  #navbar ul li:hover ul {
    width: 100%;
    position: relative;
  }
}

CSS Only Responsive Dropdown Navigation, pure javascript dropdown menu Plugin/Github, drop down menu bar in html, responsive drop down menu with submenu, responsive navigation menu css free download


See Demo And Download

Official Website(Idanref): Click Here

This superior jQuery/javascript plugin is developed by Idanref. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *