<nav class="menu-1">
<ul class="wtf-menu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Blog</a> </li>
<li> <a href="#">About</a> </li>
<li class="parent"> <a href="#">Categories</a>
<ul class="submenu">
<li> <a href="#">Aciform</a> </li>
<li> <a href="#">Asmodeus</a> </li>
<li> <a href="#">Pencillin</a> </li>
<li> <a href="#">Zanex</a> </li>
</ul>
</li>
<li> <a href="#">Contact</a> </li>
<li class="parent"> <a href="#">Parent page</a>
<ul class="submenu">
<li> <a href="#">Child page 1</a> </li>
<li> <a href="#">Child page 2</a> </li>
<li class="parent"> <a href="#">Child page 3</a>
<ul class="submenu">
<li> <a href="#">Grandchild page 1</a> </li>
<li> <a href="#">Grandchild page 2</a> </li>
<li> <a href="#">Grandchild page 3</a> </li>
</ul>
</li>
<li> <a href="#">Child page 4</a> </li>
</ul>
</li>
<li> <a href="#">Feed</a> </li>
</ul>
</nav>
-------------------------------------------------------
.wtf-menu li:hover > ul{
display: block;
-moz-animation: zoomIn .3s ease-in;
-webkit-animation: zoomIn .3s ease-in ;
animation: zoomIn .3s ease-in;
}
.wtf-menu ul li:hover > ul{
display:block;
-moz-animation: zoomIn .3s ease-in ;
-webkit-animation: zoomIn .3s ease-in ;
animation: zoomIn .3s ease-in;
}
-------------------------------------------
.wtf-menu ul.submenu ul{
left: 180px;
top:0px;
}
.wtf-menu ul.submenu li{
padding: 0px;
margin: 0px;
display: block;
float: none;
border-bottom: 1px solid #eee;
line-height: 40px;
text-transform: none;
}
.wtf-menu ul.submenu li:last-child{
border: none;
}
--------------------------------
.wtf-menu li:hover > ul{
display:block;
}
.wtf-menu ul li:hover > ul{
display:block;
}
-----------------------
source http://www.web2feel.com/working-with-css-drop-down-menus-and-animate-css/