Responsive Drop-Down Menu In Pure CSS – Free Code Download

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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

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

 

DOWNLOAD & DEMO

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

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

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.

 

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.

  • A – To create a flat navigation bar, we pretty much just sandwich <a> links inside a “normal” <nav> menu.
  • B – 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.

 

 

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.

 

 

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; }

 

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); }

 

 

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

 

LINKS & REFERENCES

Need a “modern” menu instead? Check out the other guides that I have written:

 

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!

Leave a Comment

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