Hide Div Block on Mouseout?

I have a navigation where if you hover over the main nav element (.nav-right), an interaction shows/moves a div block from the top (.nav_half-drop), and on hover out it goes back to hidden.

I want to adjust this interaction so that the hover state remains (ie hover over .nav-right to show .nav_half-drop), but remove the hover out so that the .nav_half-drop remains in place, both:

– When an anchor link or page link is clicked, and…
– When the user hovers off (ie mouseout) .nav_half-drop

I managed to almost get there using interactions, however whenever I hovered off and on .nav-right it seemed to start the interaction again which made it look buggy.

Which brings me to my question - would this be easier achieved with a javascript mouseout script?

Any ideas would be much appreciated.

Here is my site Read-Only: Link