An Easy Way to Create DropDown Navigation With CSS and Transition

Hi Reader, Thanks for visiting my blog. today i want to share how to create a dropdown navigation with CSS. first you need a HTML editor such us DreamWeaver, SublimeText or Notepad++. however, ussulaly i use SublimeText, because this software is lightweight on memory process. following are little snippet to Create dropdown menu navigation with css and css transition, no JavaScript needed but still nice transition effect with css only.

CSS for DropDown Navigation With CSS and Transition

#pagenav{
  width:100%;
  display:block;
  position:relative;
}
#pagenav li{
 float:left;
 display:block;
 position:relative;
 padding:10px 15px;
 font-weight:bold;
}
#pagenav li{
 background:#FFF;
}
#pagemenu li a{
 font-family:"Open Sans Condensed", Helvetica, Arial, sans-serif;
 color:#01ACE2;
 display:block;
 text-shadow:1px 1px 0 #FFF;
}
#pagenav li ul, #pagenav li ul li ul{
  width:150px;
  position:absolute;
  top:100%;
  left:0;
 opacity:0;
  padding:0;
 transform:translateZ(0);
 transform:translateY(10%);
 transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 -webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 visibility:hidden;
 z-index:100;
}
#pagenav li ul li ul{
  top:0;
  left:100%;
  opacity:0;
 transform:translateZ(0);
 transform:translateY(10%);
 transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 -webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 visibility:hidden;
 z-index:100;
}
#pagenav li:hover ul{
 opacity:1;
 transform:translateX(0%);
 transition-delay:0s;
 visibility:visible;
 display:block;
}
#pagenav li:hover ul li ul{
  opacity:0;
 transform:translateZ(0);
 transform:translateY(10%);
 transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 -webkit-transition:all 0.5s ease 0s,visibility 0s linear 0.5s;
 visibility:hidden;
 z-index:100;
}
#pagenav li ul li:hover ul{
 opacity:1;
 transform:translateX(0%);
 transition-delay:0s;
 visibility:visible;
 display:block;
}

an Example HTML to call DropDown Menu Navigation

<ul id="pagenav">
 <li>
  <a href="#">Menu 1</a>
  <ul>
   <li><a href="#">Menu 1a</a></li>
   <li><a href="#">Menu 1b</a></li>
   <li><a href="#">Menu 1c</a></li>
   <li>
    <a href="#">Menu 1d</a>
    <ul>
     <li><a href="#">Menu 1-2a</a></li>
     <li><a href="#">Menu 1-2b</a></li>
     <li><a href="#">Menu 1-3c</a></li>
     <li><a href="#">Menu 1-4d</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Menu 2</a>
  <ul>
   <li><a href="#">Menu 2a</a></li>
   <li><a href="#">Menu 2b</a></li>
   <li><a href="#">Menu 3c</a></li>
   <li><a href="#">Menu 4d</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a></li>
</ul>

Following is live Demo DropDown Navigation With CSS and Transition, that i create on JS Fiddle That is, a simple way to create a Drop-down menu navigation with CSS and CSS Transition