jQuery how to move main navigation bar down on hover

I am working on a menu bar. The sub menu opens upward. I want the following changes
On hover main navigation bar should move down and sub link bar should be visible upwards.
The sub menu bar should hide if mouse out of main navigation and main navigation should again move upwards.
The sub link bar should hide on page scroll and main navigation should be upward
fiddle link is

Please reply.Thanks.

Hi @adamlevine

There is no jQuery in your example, also it is not PKP software specific question. I think you better ask this on StackOverflow.
Basically, you can make your submenu displayed only when a user is hovering on it. To make it appear above menu, you can use CSS rotate function:

Don’t forget that you need to rotate content of submenu once more because it will be upside down.