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