How to optimize hover animation (css/html/jquery)?

Question

css

Hey!
Wrote the animation of the drop-down menu list when hovering on its parent.

There is one significant problem in the general 'construction' - hover over the parent several times in a row and you will see that the drop-down list is not always shown. Until its first function + animation completes, the second one will not start.

Question: how to optimize the code so that it reacts by 'dropping down' the list for each hover of the parent?

Thank you!

Code at codepen.io.