Question

I have 2 div tags which emulate a drop-down menu. When the outer div is clicked, the inner div shows below it with some links. I want the inner div to hide itself only when the mouse has left either div.

Here is how the code is failing:

1. Click the outer div.
2. Do not enter the inner div.
3. Move the mouse up, left or right to leave the outer div. The inner div should hide itself, but doesn’t.

I understand that I need to have a mouseout event hooked to the outer div, but when I do that, it hides the inner div when I try to enter it.

How can I get the inner div to hide itself when the mouse leaves either div?

<style type="text/css">
    div.toggleMenu { position: relative; }
    div.menu { position: absolute; left: -3px; top: 19px; display: none; }
</style>
<div class="toggleMenu">
    Toggle Menu
    <div class="menu">
        <ul>
            <a href="http://www.google.com/"><li>Google</li></a>
            <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
            <a href="http://www.bing.com/"><li>Bing</li></a>
        </ul>
    </div>
</div>
<script type="text/javascript">
    // Toggle the menu.
    $('.toggleMenu').click(function ()
    {
        $(this).find('.menu').toggle();
    });

    // Hide the menu when the mouse leaves the tag.
    $('.menu').mouseleave(function ()
    {
        $(this).hide();
    });
</script>

Update: Part of my problem with the inner div disappearing when I tried to mouseover it was due to line-height issues my code was having. After closer examination (1600x zoom in IE) I found my issue and I now have jquery set the height programmatically. Here is the final code for those interested:

$('.toggleMenu').click(function ()
{
    if ($(this).find('.menu').css('display') == 'none')
    {
        // The menu needs to be positioned programmatically for the
        // height due to the differences among browser interpretations of height.
        var height = $('.toggleMenu').height() - 1;
        $(this).find('.menu').css('top', height + 'px');
        $(this).find('.menu').css('left', '-3px');
        $(this).find('.menu').show();
    }
    else
    {
        $(this).find('.menu').hide();
    }
});

// Hide the menu when the mouse leaves the tag.
$('.toggleMenu').mouseleave(function ()
{
    $(this).find('.menu').hide();
});

Answer 1

I would try:
http://jsfiddle.net/shaneburgess/k5WRG/1/

  // Toggle the menu.
    $('.toggleMenu').click(function ()
    {
        $(this).find('.menu').toggle();
    });

    // Hide the menu when the mouse leaves the tag.
    $('.toggleMenu').mouseleave(function ()
    {
        $(this).find(".menu").hide();
    });