Responsive Drop-Down Menu In Pure CSS (NO Javascript)

Welcome to a tutorial on how to create a responsive drop-down menu with pure CSS. Yep, there are a ton of these “dropdown menu plugins” all over the Internet, but some of them require a third-party library. It really doesn’t make sense to load an entire library just for a simple menu, so here it is. We can actually build a simple drop-down menu using just pure CSS – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

DROPDOWN MENU DEMO

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

 

 

STEP 1) THE HTML

<nav class="ddmenu">
  <!-- (A) "NORMAL ITEMS" -->
  <a href="#">Menu A</a>
  <a href="#">Menu B</a>
  <a href="#">Menu C</a>
 
  <!-- (B) DROPDOWN GROUP -->
  <div class="ddgroup">
    Menu D
    <div class="ddsub">
      <a href="#">Sub Menu A</a>
      <a href="#">Sub Menu B</a>
    </div>
  </div>
</nav>

This should not require a lot of explanation.

1. To create a flat navigation bar, we pretty much just sandwich <a> links inside a “normal” <nav> menu.
2. But to add a “dropdown group” to the menu, a little more is required.
   • Wrap the entire dropdown tab in a <div class="ddgroup"> wrapper.
   • Wrap the links inside yet another <div class="ddsub"> wrapper.

 

 

STEP 2) CREATING A FLAT NAVIGATION BAR

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

With the HTML menu in place, the first task is to create a “flat horizontal menu bar”.

• Actually, .ddmenu { display: flex; } pretty much does the magic.
• But to equally space all the menu items, we set .ddmenu a, .ddmenu .ddgroup { width: 100% }

Yep, that’s all. The rest are pretty much just cosmetics.

 

 

STEP 3) DROPDOWN MECHANISM

.ddmenu .ddgroup { position: relative; }
.ddsub {
  width: 100%;
  position: absolute;
  top: 100%; left: 0;
  display: none;
}
.ddsub a { 
  display: block; 
  box-sizing: border-box;
}
.ddgroup:hover .ddsub { display: block; }

Next, we deal with the dropdown groups themselves.

• To position the dropdown under the respective tabs, we set .ddmenu .ddgroup { position: relative; } and  .ddsub { position absolute; top: 100%; left: 0; }
• Hide the dropdown by default – .ddsub { display: none; }.
• Then show the dropdown only on mouse hover – .ddgroup:hover .ddsub { display: block; }

 

STEP 4) DROPDOWN ARROW INDICATOR

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

Well, this is kind of an “extra” to add an arrow to indicate the dropdown tabs.

• We use .ddgroup::after { content: "\27A4"; } to attach the dropdown arrow.
• Position it on the right side of the tab – .ddgroup::after { position: absolute; top: 13px; right: 10px; }
• Lastly, use CSS rotate to indicate the “dropdown open/closed” status – .ddgroup:hover::after { transform: rotate(90deg); }

 

 

STEP 5) RESPONSIVE MOBILE SUPPORT

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

Last step – We do some transformations to make the menu look good on small mobile screens too.

• .ddmenu { flex-wrap: wrap } breaks the menu items into a single column.
• .ddsub { position: static } also breaks the drop-down items into a single column.

Yep, that’s all for the so-called “difficult responsive dropdown menu”.

 

 

DESIGN & RESTRICTIONS

Captain Obvious to the rescue – The dropdown menu is restricted to 2 levels only. Feel free to try and add more levels to it, but that will also increase the complexity. How and where are you going to display the nested-nested menu? How about on the mobile?

Needless to say, a deeply nested drop-down menu can be very awkward too. So reminder – It’s still the best to keep things simple and easy to navigate.

 

COMPATIBILITY CHECKS

• CSS Flexbox – CanIUse
• CSS Animation – CanIUse

The pure CSS dropdown menu should work on all modern browsers.

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET