Responsive Dropdown Menu In HTML CSS (No Javascript)

Welcome to a tutorial on how to create a responsive dropdown menu in HTML CSS. Yep, there are a ton of “dropdown menu plugins” on the Internet. But we can literally build one within minutes, using only HTML CSS. No third-party libraries and senseless bloat. Read on for the example!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

DROPDOWN MENU DEMO

Go ahead – Resize the window and see how the menu changes its layout.

 

 

 

TUTORIAL VIDEO

 

PART 1) THE HTML

<nav class="ddmenu">
  <!-- (A) "NORMAL ITEMS" -->
  <a>Item</a>
  <a>Item</a>
  <a>Item</a>
 
  <!-- (B) DROPDOWN GROUP -->
  <div class="ddgroup">
    Group
    <div class="ddsub">
      <a>Sub</a>
      <a>Sub</a>
    </div>
  </div>
</nav>

This should be pretty self-explanatory.

1. Create a “normal” <nav> menu as usual, sandwich <a> inside.
2. A little more is required for dropdown groups.
   • Wrap the entire dropdown tab in a <div class="ddgroup"> wrapper.
   • Wrap the <a> links inside yet another <div class="ddsub"> wrapper.

 

 

PART 2) FLAT NAVIGATION BAR

/* (A) FIRST LEVEL */
.ddmenu { display: flex; }
.ddmenu a, .ddgroup {
  text-decoration: none;
  cursor: pointer;
  display: block; width: 100%; padding: 15px;
  color: #fff; background: #585858;
}
.ddmenu a:hover, .ddgroup:hover {
  color: #ffe945; background: #3a3a3a;
}

Now that the HTML is ready, the first step is to create a navigation bar.

• .ddmenu { display: flex; } Setting flex layout pretty much does the magic of creating a horizontal menu bar.
• .ddmenu a, .ddgroup { ... } Of course, some cosmetics to make the menu items and groups look better.
• .ddmenu a:hover, .ddgroup:hover { ... } Change the colors on mouse hover.

 

PART 3) DROPDOWN MECHANISM

/* (B) SECOND LEVEL */
.ddgroup { position: relative; }
.ddsub {
  display: none; width: 100%;
  position: absolute; top: 100%; left: 0;
}
.ddgroup:hover .ddsub { display: block; }

To deal with the dropdown groups.

• Position the dropdown items under the respective tabs.
  • .ddgroup { position: relative; }
  • .ddsub { position absolute; top: 100%; left: 0; }
• .ddsub { display: none; } Hide the dropdown items by default.
• .ddgroup:hover .ddsub { display: block; } Show the dropdown items only on mouse hover.

 

 

PART 4) RESPONSIVE MOBILE SUPPORT

/* (C) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .ddmenu { flex-wrap: wrap; }
  .ddsub { position: static; margin-top: 10px; }
}

Finally, some small changes to make the menu look good on small mobile screens.

• .ddmenu { flex-wrap: wrap } Break the menu items into a single column.
• .ddsub { position: static } Do not “float” the dropdown items, display it in a single column as well.

 

OPTIONAL) DROPDOWN ARROW INDICATOR

/* (D) DROPDOWN ARROW */
.ddgroup::after {
  content: "\27A4"; font-size: 16px; line-height: 16px;
  position: absolute; top: 16px; right: 10px;
  transition: transform 0.2s;
}
.ddgroup:hover::after { transform: rotate(90deg); }

To add an arrow to indicate the dropdown.

• content: "\27A4" Use the after pseudo-class to attach the dropdown arrow.
• position: absolute; top: 16px; right: 10px; Place the arrow at the right side.
• .ddgroup:hover::after { transform: rotate(90deg); } Rotate the arrow on mouse hover.

 

 

 

DESIGN RESTRICTIONS

• Captain Obvious to the rescue, the dropdown is restricted to 2 levels only.
• It is possible to add more levels, but that becomes a “tree menu” instead – See the links below.
• I will not recommend more than 2 levels – It gets complicated, and the nested menu is awkward on small mobile screens.

 

COMPATIBILITY CHECKS

• CSS Flexbox – CanIUse
• CSS Animation – CanIUse

The HTML CSS dropdown menu works on all modern browsers.

 

LINKS & REFERENCES

• HTML CSS Hamburger Menu – Code Boxx
• HTML CSS Responsive Tree Menu – Code Boxx

 

INFOGRAPHIC CHEAT SHEET