JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a id="open_link" href="#">Open Link (Hover)</a>

<div id="menu" class="hidden">Menu With Things</div>
<p>Works in Chrome 43</p>
<p>Broken in Firefox 38</p>
<p>Broken in IE 11</p>
<p>Menu should stay as long as it or the link is hovered.</p>

CSS

body {font-family:"Arial",sans-serif;}
#open_link {
    display:block;background:blue;color:#FFF;padding:10px;margin:0;width:150px;text-decoration:none;
}

#menu {
    display:block;background:cyan;padding:10px;margin:0;width:300px;
}

.hidden {visibility:hidden;display:none;}

JavaScript

$("#open_link").hover(function() {
    $("#menu").removeClass("hidden");
},function() {
    if ($("#menu").is(":hover")) {
        $("#menu").mouseleave(function() {
            $("#menu").addClass("hidden");
        });
    }
    else {
        $("#menu").addClass("hidden");
    };
});