CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arash Sadeghizadeh
Arash Sadeghizadeh

Reputation: 21

Animate vertical sub menu with css

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

Upvotes: 0

Views: 559

Answers (1)

connexo
connexo

Reputation: 56754

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.

Upvotes: 3

Related Questions