Pure css solution is CSS(3) transitions.
use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.
See fiddle (it’s your code, with 3 additions)
ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
3
solved Dropdown menu effect [closed]