Continue to show the div when it no longer hovers on the trigger link

Question

I have a problem with the menu I just encoded: https://jsfiddle.net/nL124rLq/1/

I use a generic selector (~) on my css, and I think this might be a mistake, because that could be the cause of my problem:

#nav #link1:hover ~ #flydown {
left:0;
display:block;
}

#nav #link2:hover ~ #flydown {
    left:-100%;
    display:block;
}

... etc.

As you can see, everything works fine, but when I stop hanging on anchors, the sliding menu under the links disappears . I understand that my code is not designed to work correctly, but I cannot figure out how to make it work.

I am going to add content (submenus) to the colored areas that form the slider, so they should be clickable and should remain visible when the user hovers over them.

, : http://www.tiffany.es/

, , !

Answer 1

, , . @Michael_B ! . , !

, nav (link1, link2... ..):

$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});

$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});

... CSS (permahover1, permahover2 ..), : 0%, : -100% ..:

.flydown.permahover1 {
left:0%;
display:block;
}

. . JSFiddle:

https://jsfiddle.net/nL124rLq/4/

, , , !