Animate vertical sub menu with css

Question

We have menu and some of this menu has a sub-menu. i want to display sub-menu when come to display block with animation. specially height of sub-menu. for example:

#menu ul.sub_menu {
    display             : none;
}

#menu li:hover ul.sub_menu {
    display             : block;
}

please see my code jsfiddle.net/oa6ftrL8/ , thanks

Answer 1

You cannot animate the display property. Go with opacity: 0; instead of display: none; and opacity: 1; instead of display: block;

Add some max-height: 0; and max-height: fartoomanypx; for the animation (because height cannot be animated to auto ).

https://jsfiddle.net/oa6ftrL8/1/

You will have to start fiddling yourself to make it beautiful.