Keep showing div when not hovering on trigger link anymore - html

Question

I'm having a problem with the menu I just coded: https://jsfiddle.net/nL124rLq/1/
I am using a general selector (~) on my css and I think this might be a mistake, because it might be the origin of my problem:
#nav #link1:hover ~ #flydown {
left:0;
display:block;
}
#nav #link2:hover ~ #flydown {
left:-100%;
display:block;
}
... and so on.
As you can see, everything works fine but when I stop hovering on the anchors, the sliding menu under the links disappears. I understand my code is not made for this to work correctly, but I can't figure out a way of making it work.
I am going to add content (sub-menus) to the coloured areas that form the slider, so they must be clickable and must remain visible when the user hovers over them.
If it's any help, I got the idea from this site: http://www.tiffany.es/
Thank you guys very much in advance and excuse the relatively vague question!

Answer 1

Okay, so I found the solution, more or less. #Michael_B 's help was awesome! The resulting code looks horrible though. Oh well, it works!
Basically I added this to every single link that I have on the nav (link1, link2... etc.):
$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});
$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});
...and added the following CSS once for every element in my menu (permahover1, permahover2 etc.) to specify their different positions with left:0%, left:-100%, etc:
.flydown.permahover1 {
left:0%;
display:block;
}
It got really dirty in no time. But I don't know a better solution. Here's a working JSFiddle:
https://jsfiddle.net/nL124rLq/4/
As always, thank you guys very much for your help!