5 Steps 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo Drop Down Menu Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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.

Menu A
Menu B
Menu C
Group A
Sub Menu A
Sub Menu A

 

DROPDOWN MENU

All right, let us now get into how to build a responsive dropdown menu.

 

STEP 1) THE HTML

drop-down.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

drop-down.css
/* (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

drop-down.css
.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

drop-down.css
/* (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

drop-down.css
/* (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”.

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

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

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

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Simple Drop Down Menu In Pure CSS (Click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that this has helped you to build a better website, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “5 Steps Responsive Drop-Down Menu In Pure CSS – NO Javascript!”

  1. Your guides are great! I am wondering if you have already done a combination of this (drop down) and the hamburger menu. I am trying to combine, but keep running into problems. What I am trying to achieve is a menu that has two levels of sub menus and, which viewed on mobile (small screens) just shows the hamburger which can be clicked to expand the menu.

Leave a Comment

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