Dropdown Menu | Digital Phoenix Agency
20 Jan 2017
20 Jan, 2017

Hello everyone!

In this tutorial we will be creating a basic navigation menu with multiple level dropdown using HTML / CSS and jQuery.

HTML Structure

Let’s start with a clean HTML structure for our navigation system. As you can see, the Markup contains series of nested <ul> and <li>, simple hierarchical menu, consisting of multiple levels. This menu can be identified with a class name we give it to it such as .nav.

<ul class="nav">

  <!--  #1 Menu Item  -->
  <li class="menu-1">
    <a href="#">Menu #1</a>
    <ul>
      <li><a href="#">Submenu #1</a></li>
      <li><a href="#">Submenu #2</a></li>
    </ul>
  </li>

  <!--  #2 Menu Item  -->
  <li class="menu-2">
    <a href="#">Menu #2</a>
    <ul>
      <li><a href="#">Submenu #1 &raquo;</a>
        <ul>
          <li><a href="#">Submenu #1</a></li>
          <li><a href="#">Submenu #2</a></li>
          <li><a href="#">Submenu #3</a></li>
          <li><a href="#">Submenu #4 &raquo;</a>
            <ul>
              <li><a href="#">Submenu #1</a></li>
              <li><a href="#">Submenu #2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Submenu #2</a></li>
      <li><a href="#">Submenu #3</a></li>
    </ul>
  </li>

  <!--  #3 Menu Item  -->
  <li class="menu-3">
    <a href="#">Menu #3</a>
    <ul>
      <li><a href="#">Submenu #1</a></li>
      <li><a href="#">Submenu #2</a></li>
      <li>
        <a href="#">Submenu #3 &raquo;</a>
        <ul>
          <li><a href="#">Submenu #1</a></li>
          <li><a href="#">Submenu #2</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <!--  #4 Menu Item  -->
  <li class="menu-4">
    <a href="#">Menu #4</a>
    <ul>
      <li><a href="#">Submenu #1</a></li>
      <li><a href="#">Submenu #2</a></li>
    </ul>
  </li>
</ul> 

CSS

Cool! Now let's add some basic styling to our navigation menu. Let's align it properly and give it some borders.

.nav {
  height: 40px;
  border-radius: 3px;
  min-width: 500px;
  border: 1px solid #ddd;
  padding-left: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  list-style: none;
  height: 40px;
  position: relative;
}

.nav li a {
  padding: 0 10px;
  margin: 0;
  line-height: 40px;
  height: 40px;
}

.nav ul {
  padding: 0;
  width: 170px;
  border: 1px solid #ddd;
}

.nav li a {
  display: block;
}

.nav ul li {
  border-right: none;
  border-bottom: 1px solid #DDD;
  width: 170px;
  height: 39px;
}

.nav ul li a {
  border-right: none;
  border-bottom: 1px solid #FFF;
}

/* Sub Menus */
.nav ul {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 40px;
}

/* Third-Level Menus */
.nav ul ul {
  top: 0;
  left: 170px;
  display: none;
  visibility: hidden;
  border: 1px solid #DDD;
}

/* Fourth-Level Menus */
.nav ul ul ul {
  top: 0;
  left: 170px;
  display: none;
  visibility: hidden;
  border: 1px solid #DDD;
}

.nav ul li {
  display: block;
  visibility: visible;
}

.nav li:hover > ul {
  display: block;
  visibility: visible;
} 

We've override the default style rules of <ul> and <li> tags. We've used flexbox to position elements next to each other and display them on center. Then we've set fixed height. And positioned absolute the deeper level sub menus (<ul> tags).

To bring the hidden elements into visibility on mouse hover, we simply add display: block; in <li> hover selector. This way our navigation menu will work by only using CSS3.

 

Now let's customize it and give it some personality. We'll make each sub menu level in different color.

So this will be the new CSS for navigation menu:

body {
  background: #ecf0f1;
}

.nav {
  height: 40px;
  border-radius: 3px;
  min-width: 500px;
  padding: 0 50px;
  display: flex;
  justify-content: space-around;
  background: #e74c3c;
  font-family: 'Open Sans', sans-serif;
}

.nav li {
  list-style: none;
  height: 40px;
  position: relative;
  text-transform: uppercase;
}

.nav li a {
  padding: 0 10px;
  margin: 0;
  line-height: 40px;
  height: 40px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 2px;
}

.nav ul {
  padding: 0;
  width: 170px;
  border: 1px solid #16a085;
  background: #16a085;
}

.nav li a {
  display: block;
}

.nav li a:hover {
  color: #2c3e50;
  transition: color 0.2s ease;
}

.nav ul li {
  border-right: none;
  border-bottom: 1px solid #34495e;
  width: 170px;
  height: 39px;
}

.nav ul li a {
  border-right: none;
  border-bottom: 1px solid #34495e;
  text-transform: none;
}

/* Sub Menus */
.nav ul {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 40px;
}

/* Third-Level Menus */
.nav ul ul {
  top: -1px;
  left: 170px;
  display: none;
  visibility: hidden;
  border: 1px solid #3498db;
  background: #3498db;
}

/* Fourth-Level Menus */
.nav ul ul ul {
  top: 0;
  left: 170px;
  display: none;
  visibility: hidden;
  border: 1px solid #9b59b6;
  background: #9b59b6;
}

.nav ul li {
  display: block;
  visibility: visible;
}

.nav li:hover > ul {
  display: block;
  visibility: visible;
}

/* Divider */
.divider {
  line-height: 40px;
  color: #34495e;
} 

Now the dropdown menu should work without JavaScript, but we can take advantage of powerful jQuery to add that slide or fade effect to our menu that we all like.

$(document).ready(function(){
    $(".nav li").hover(
    function(){
        $(this).children('ul').hide();
        $(this).children('ul').slideDown();
    },
    function () {
        $('ul', this).slideUp('fast');            
    });
}); 

Conclusion

We've successfully created this pure cool dropdown menu. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Keep on hacking.

Ready to get Started?