jQuery custom menu

Question

Hi, every jQuery plugin I've found is based on <li> elements to generate the menu items.

I have <div id = "menubutton"> element that represents the menu button and another, not-related (maning it is not a child) <div id = "menucontent"> that contains the menu items (mixed stuff, images etc). I want this second, hidden div to appear when I click on the button. it should hide back when i leave the button OR when i leave the content div, in case i'm selecting items or doing stuff there.

Now, this is the code I have so far, but the clearTimeout thing doesn't seem to work. Any help? Pointing out a plugin to help my work would work as well.

Thanks!

        var timer;

        $('#menubutton').click(function() {
            $('#menucontent').show();
        });

        $('#menubutton').mouseout(function() {
            timer = setTimeout('$("#menucontent").hide()', 500);
        });


        $('#menucontent').mouseover(function() {
            clearTimeout(timer);
        }).mouseout(function() {
            setTimeout('$("#menucontent").hide()', 300);
        });

EDIT SOLUTION

I solved the problem using hover insted of mouseover / mouseout

Answer 1

Try this:

    $('#menubutton').click(function() {
        $('#menucontent').show();
    });

    $('#menubutton').mouseout(function() {
        $(this).data('myTimer', setTimeout('$("#menucontent").hide()', 500));
    });

    $('#menucontent').mouseover(function() {
        clearTimeout($(this).data('myTimer'));
    }).mouseout(function() {
        setTimeout('$("#menucontent").hide()', 300);
    });