Fully CSS Animated DropDown Menu

In this tutorial,  am going to show you how to create fully css animated dropdown menu without using JQuery and Javascript

This menu will be creating sub categories that appear once the parent menu is activated by hover. See it in action here.

Demo

THE HTML STRUCTURE

<nav>
  <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Frameworks">Frameworks</a></li>
    <li><a href="#" title="Bootstrap">Bootstrap</a></li>
    <li><a href="#" title="Technology">Technology</a></li>
  </ul>
</nav>

First of all, we have to create HTML  <nav> element to house the navigation menu bar, then add the parent menu items in an unordered list.

<nav>
   <ul>
     <li><a href="#" title="Home">Home</a></li>
     <li><a href="#" title="Frameworks">Frameworks</a>
          <ul>
              <li><a href="#" title="Wordpress">Wordpress</a></li>
              <li><a href="#" title="Yii">Yii</a></li>
              <li><a href="#" title="Laravel">Laravel</a></li>
         </ul>
    </li>
    <li><a href="#" title="Bootstrap">Bootstrap</a></li>
    <li><a href="#" title="Technology">Technology</a>
          <ul>
              <li><a href="#" title="HTML">HTML</a></li>
              <li><a href="#" title="CSS">CSS</a></li>
              <li><a href="#" title="JQuery">JQuery</a></li>
              <li><a href="#" title="Javascript">Javascript</a></li>
         </ul>
     </li>
   </ul>
</nav>

The sub menu links can be added under the “Frameworks” and “Technology” links, with each link is inserted with complete unordered list under the parent menu item.

The CSS Styling

/* sub menu style */
nav ul ul{
  position:absolute;
  width:190px;
  opacity:0;
   top:50px;
   left:-76px;
   background: #52A354;
   transition: all 0.3s ease-in-out; /* mouse hover effect */
   -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
}
/* sliding effect on submenu*/
nav>ul>li:hover ul{
   top: 79px;
   opacity: 1;
}

We should hide all the sub menus with the use of opacity:0 . In order to make sub menus reappear on hovering, give opacity:1 in li:hover. Adding positon: absolute will allow us to adjust the position of sub menu for sliding effect. With the use of top:50px, we can position the sub menu on top and on hover top: 79px, when you hovering on parent menu, it will appear like a slide down jquery effect with the help of transition css. The > child selector makes sure only the child UL of parent LI is being targeted, rather than others should appear.

/* parent menu list style*/
nav>ul>li{  
  list-style:none;  
  position:relative;  
  display: inline-block;
}
/* parent menu anchor style*/
nav>ul>li>a{  
  display:block;  
  line-height:80px;  
  padding:0 18px;  
  position:relative;  
  z-index:10;  
  transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;
}

Avoid default bullet list on menu list by adding list-style : none and display: inline-block will make element display in a block container. The transition property in nav>ul>li>a will give fade in out effect while moue hovering on menu items.

/* parent menu hover style */
   nav>ul>li:hover>a{
   background: #52A354; /* change mouse hover background here */
   color:#FFF;
}

You can change the background and text color while hovering on parent menu.

/* sub-menu list style*/
nav ul ul li{
   position:relative;
   display: block;
   text-align: left;
   padding: 0 0 0 30px;
   line-height: 32px;
   text-transform: capitalize;
   font-size:12px;
   transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out; /* mouse hover effect */
   cursor: pointer;
}
/* sub-menu list hover*/
nav ul ul li:hover{
   background: #008000;
}
/* + operator selects all li elements placed immediately after nav>ul>li */
nav>ul>li + li{ margin-left: 5px;}
/* sub-menu list anchor style*/
nav>ul>li>a{
display:block;
line-height:80px;
padding:0 18px;
position:relative;
z-index:10;
transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;
}

The final step is to style the sub menu list and hover style. + operator is used to select all elements placed immediately after nav>ul>li. Now the fully CSS animated dropdown menu without JQuery and Javascript is ready to launch. See it in action here.

Demo