In first menu, the transition was added to the hover state instead of the regular state. Notice how the transition only occurs when you first hover. When you go back to regular state, there is no transition.
In the second menu, this is fixed by putting the transition on the regular state. Now the transition happens in both directions. There is still a problem, however. The menu jumps just slightly when the transition is happening.
In the third menu, there is no jumping. This was fixed by adding a height of 44px to the li tag. This keeps the height stable, even if the child elements change size.