Transition effect on hover

Question

i'm stuck with simple thing, not able to resolve this. When i hover over an li element in html, i've made it so that a few other li's go down (form of a dropdown menu).

However, i'm trying to find a way to get that dropdown have a transition effect on dropping down, but i'm can't figure it out...

Link to that is:

`https://jsfiddle.net/cphtd3ge/`

I would really much appreciate it if someone can assist me with this. I'm still learning and i want to learn as much as i can.

Answer 1

I've updated your jsfiddle, hope this helps. https://jsfiddle.net/cphtd3ge/21/

You need to add the transition onto the selector you want to animate, not its children. I also used max-height instead of height because you can't transition from 0px to auto in CSS.