Reverse animation on hover off

I am trying to create a dropdown menu which slides down when I hover over and slides up again when I hover off the menu trigger.
The slide down works perfectly but I can't get the slide up working. It would be nice if I can get a solution with pure CSS
Here is my jsfiddle: https://jsfiddle.net/kp073okj/
And for the guys of you who want the code right now, here it is: