I am trying to code up a design which was provided to me by an art director I am working with. She wants a menu where the items with submenus trigger a dropdown which appears shifted up. I tried adjusting a basic css dropdown just setting a negative top margin on the menu item, which works until you move your cursor off of it, which makes the whole submenu move back down again. The 'pop up' submenu would have to stay in the mouseover position until the cursor is moved from it, and needs to have a different background color for rollovers.

Here is a link to a screenshot of what I am trying to accomplish.

Here is what I have so far in codepen: Feel free to tinker with it.

Any assistance would be GREATLY appreciated!