Mouseout event not working as expected

Question

I am trying to build in a button (#nav_float_menu_button in the code given below) that will draw a menu when the mouse moves over it. So far, so good - but when I try to move away from Item#1 and go down to Item#2 or lower, the menu vanishes.

How do I get the menu to stay on the screen until the mouse has moved out of its area?

<div id="nav_float_menu" style="position:absolute;top:2px;right:30px;display:none;z-index:1400;border-style:solid" onmouseover="keepShowing()" onmouseout="hideMenu()">
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item1"><br>
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item2" ><br>
    <input type=button class=SignBtn style="width:15em;border-radius:15px" value="Item3"><br>
</div>

<input type=button id="nav_float_menu_button" style="position:absolute;top:2px;right:30px;z-index:1000" value="Menu" class=flatBtn onmouseover="toggleNavMenu()">

<script type="text/javascript">
function toggleNavMenu()
{
    if($("#nav_float_menu").is(':hidden'))
    {
        $("#nav_float_menu").show();
    }
    else
    {
        //$("#nav_float_menu").hide();  
    }
}

function keepShowing()
{
    $("#nav_float_menu").show();
}

function hideMenu()
{
    $("#nav_float_menu").hide(500); 
}
</script>

Answer 1

You could Implement mouseleave like so

$("#menucontainer").mouseleave(function () {
    $("#menu").slideUp('slow');
});

Working example here - http://jsfiddle.net/9yEHV/304/

In your code the mousehover event ends as soon as you move off the input. This is because the mousehove event isnt part of your menu code. To prevent the menu from disappearing you need to create a wrapper/container around your markup which encapsulates both the input and menu.

Hope this makes sense

Answer 2

You can check if the mouse is on the menu on your hide function :

function hideMenu()
{
    if(!$('#nav_float_menu').is(":hover")) {
        $("#nav_float_menu").hide(500); 
    }
}