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).

Must Read: [Dropup] Pure CSS Dropdown Menu Used For Tooltip | Drop.css

How to make use of it:

1. Create a navigation menu for the navigation dropdown. Note that this example uses Font Awesome 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;
  }
}

See Also –

An Autocomplete Component Built With Pure JavaScript | Pickle Complete
Create Mobile Sidebar/Sidenav in Pure Javascript | SidebarJS
Highly Customizable Pure Javascript Modal Window/Lightbox/Popover | njBox


See Demo And Download

Official Website(Idanref): Click Here

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

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Lightweight-jQuery-Input-Mask-Plugin

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers

jquery-input-mask-phone-number.js – Simple and easy jquery phone number mask library. JQuery Plugin for masks input field to US phone format. Must Read: jQuery Creates an Input Mask…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…