Pure CSS Dropdown Navigation Menu with Animation

Here is a quick and easy way to add beautiful CSS animation to a simple dropdown menu.

Here is the HTML structure for our dropdown menu:

<ul class="menu">		
  <li><a href="#">Home</a></li>	
  <li><a href="#">About</a></li>	
  <li><a href="#">Products</a>
    <ul class="submenu">
      <li><a href="#">Clothing</a>
      <li><a href="#">Shoes</a>
      <li><a href="#">Accessories</a>
    </ul>
  </li>	
  <li><a href="#">Contact</a></li>	
</ul>

Here is the basic CSS for a dropdown menu:

ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.menu li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.menu li a {
    display: block;
    padding: 0 25px;
    text-align: center;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li ul.submenu {
    float: left;
    position: absolute;
    left: 0;
    top:0;
    visibility:hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li:hover ul.submenu {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
ul.menu li:hover ul.submenu li {
    float: none;
    width: 100%;
}

The key things to note in the code above are the positioning, the opacity, and the visibility declarations for ul.submenu and ul.submenu when its parent LI is hovered over.

By positioning the submenu 0px from the top of it’s parent LI to begin with, adding a transition style to it, and then changing the position from the top to 50px when the parent LI is hovered over, we achieve a beautiful “sliding down” effect on the submenu.

You could obviously edit the positioning of the submenu to easily achieve a “slide in from the bottom or one of the sides” affect as well.

You will notice that the initial opacity of the submenu is 0 and changes to 1 when the parent LI is hovered over, this adds a beautiful fade in effect.