How to Create a Responsive Multi-Level Dropdown Menu Using HTML & CSS

2nd June 2025

979

Creating a clean, responsive multi-level dropdown menu without JavaScript is entirely possible using just HTML and CSS. In this tutorial, we’ll walk through how the provided code works to create a professional-looking dropdown navigation that works great on both desktop and mobile devices.

Video Tutorial:

HTML Structure:

The HTML code creates a multi-level dropdown navigation menu. Inside the <nav> element, there is an <input type="checkbox" id="menu-toggle" />, which acts as a hidden checkbox to control the visibility of the menu on mobile devices. A <label for="menu-toggle" class="hamburger">☰</label> displays the hamburger icon, and when clicked, it toggles the checkbox to show or hide the menu.

The main menu is structured within an unordered list (<ul class="menu">), with each list item (<li>) representing a navigation link. The items like “Home” and “Contact” are simple links, but the “Services” item contains a nested unordered list (<ul class="submenu">) with additional items like “Web Design,” “Marketing,” and “Consulting.” The “Marketing” item, in turn, has another nested submenu (<ul class="submenu-right">) with options like “SEO” and “Social Media,” creating a multi-level dropdown. Special characters such as ▾ are used to represent down arrows (▼), indicating the presence of nested menus. This structure enables a clean, hierarchical dropdown navigation that adapts for mobile and desktop use.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multi-Level Dropdown</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="hamburger">&#9776;</label>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#">Services &#9662;</a>
          <ul class="submenu">
            <li><a href="#">Web Design</a></li>
            <li class="dropdown">
              <a href="#">Marketting</a>
              <ul class="submenu-right">
                <li><a href="#">SEO</a></li>
                <li><a href="#">Social Media</a></li>
              </ul>
            </li>
            <li><a href="#">Consulting</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

CSS:

Universal Reset: The * { padding: 0; margin: 0; box-sizing: border-box; } resets padding, margin, and sets the box-sizing property to border-box, ensuring consistent box sizing across elements.
Body Font: The body { font-family: "Poppins", sans-serif; } applies the Poppins font to the entire page, giving it a modern and clean look.
Navbar Styling: The nav { background: #000000; padding: 10px 20px; } styles the navigation bar with a black background and padding around the navbar.
Menu Layout: The .menu class styles the navigation list as a horizontal flex container with wrapped items (display: flex; flex-wrap: wrap;), ensuring items are aligned and wrap to the next line if needed.
Menu Item Styling: The .menu li and .menu a elements are styled with padding, colors, and transitions for smooth hover effects.
Hover Effects: The .menu li:hover > a rule changes the background color of a menu item and text color when hovered, making the menu more interactive and user-friendly.
Dropdown Menu Positioning: The .submenu and .submenu-right classes are positioned absolutely to appear beneath or beside their parent items. They are hidden by default (display: none;) and will be shown on hover or interaction, depending on the screen size (handled by the media queries).

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
}
nav {
  background: #000000;
  padding: 10px 20px;
}
.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.menu li {
  position: relative;
}
.menu a {
  display: block;
  padding: 10px 20px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.menu li:hover > a {
  background-color: #000000;
  color: #2971f6;
}
.submenu,
.submenu-right {
  display: none;
  position: absolute;
  background: #000000;
  min-width: 160px;
  list-style: none;
  z-index: 100;
}

Hamburger Menu: The hamburger icon (.hamburger) is displayed as a block, with a size of 26px and a white color. It becomes clickable and styled with a cursor.
Menu Visibility: The .menu is initially hidden (display: none) and set to stack vertically (flex-direction: column) on small screens.
Checkbox Toggle: The #menu-toggle checkbox is hidden, but when it is checked, it reveals the menu (#menu-toggle:checked + label + ul).
Submenu Behavior: Nested submenus (.submenu and .submenu-right) are displayed when their parent is hovered or clicked, and the submenu items are indented for hierarchy.
Arrow Indicators: Arrows (▸ and ▼) are used to indicate the presence of dropdown items and change on hover to show the dropdown menu is expanded.

@media (max-width: 768px) {
  .hamburger {
    display: block;
    font-size: 26px;
    color: #ffffff;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #000000;
  }

  #menu-toggle {
    display: none;
  }

  #menu-toggle:checked + label + ul {
    display: flex;
  }

  .menu li {
    width: 100%;
  }

  .submenu,
  .submenu-right {
    position: static;
    display: none;
    padding-left: 20px;
  }

  .menu li:hover > .submenu,
  .submenu li:hover > .submenu-right {
    display: block;
  }

  .submenu .dropdown > a::after {
    content: "▸";
    float: right;
  }

  .submenu .dropdown:hover > a::after {
    content: "▼";
  }
}

Dropdown on Hover: On larger screens, submenus (.submenu and .submenu-right) are displayed when the user hovers over their parent list items (li). Submenus are positioned below or beside their parent items.
Arrow Indicators: Arrows (▸ and ▼) are added after each dropdown item to indicate whether it can be expanded or collapsed.
Hide Hamburger on Desktop: The hamburger menu and the checkbox toggle are hidden on desktop and larger screens since the dropdown is handled with hover.

@media (min-width: 769px) {
  .menu li:hover > .submenu {
    display: block;
    top: 100%;
    left: 0;
  }

  .submenu li:hover > .submenu-right {
    display: block;
    top: 0;
    left: 100%;
  }

  .submenu .dropdown > a:after {
    content: "▸";
    float: right;
  }

  .submenu .dropdown:hover > a::after {
    content: "▼";
  }

  .hamburger,
  #menu-toggle {
    display: none;
  }
}

Download Code

Previous articleHow to Create a Responsive Masonry Grid Gallery Using Pure CSS

Next articleBuild a Pros & Cons List Maker with HTML, CSS, and JavaScript

1 COMMENT

Jeff Porter 1st October 2025 At 12:25 am

Dropdown doesn’t work on desktop, but it does on mobile for the most part. I’m using Safari on a Mac.

Reply

How To Create A Custom Icecream Maker With Javascript

Interactive Border Radius Tool | HTML, CSS & Javascript

Build a Draggable and Sortable Grid with HTML, CSS, and JavaScript Introduction

Read More/Read Less Button Using Only CSS

How to Create a Responsive Multi-Level Dropdown Menu Using HTML & CSS

Video Tutorial:

HTML Structure:

CSS:

Build a Fun Balloon Pop Game Using HTML, CSS, and JavaScript

Build an Analog Clock with HTML, CSS, and JavaScript

Responsive Pricing Cards with Hover Effect Using HTML and CSS

1 COMMENT

LEAVE A REPLY Cancel reply

Most Popular

Build a Fun Balloon Pop Game Using HTML, CSS, and JavaScript

Build an Analog Clock with HTML, CSS, and JavaScript

Responsive Pricing Cards with Hover Effect Using HTML and CSS

Flashlight Effect With HTML, CSS and Javascript

FOLLOW US