jQuery Drop Down menu - hover and click

Question

I have a menu that shows when you hover over a "Menu" link in the header. Right now the drop down menu is showing/hiding through CSS. I would like to keep the hover functionality, but also add a jQuery feature where if you click the word "Menu" it toggles the menu and keeps it open, even if you move your mouse away.

I can do one or the other but haven't figured out if it's possible to combine both.

Here's the javascript that I have for the click/toggle:

$("#menu-drop-arrow").click(function(){
    var a=300;
    $("#menu").slideToggle(a);
    $("#hide_menu").click(function(){
        $("#menu").slideUp(a)
    })
});

Does anyone know if it's possible to have the menu show and hide by hovering it, but if you click the link it will keep the menu open until you click the link again?

Thank you!

EDIT * ** * ** * ** * ** * ** * ** * ** * ** *

Here's a sample of the menu code if it helps any:

<div id="menu-drop">
 <div id="menu-drop-arrow"><span id="menu-text">Menu</span>
 <div class="show_col">
 <div class="menucat">
 <ul class="menuitem">
   *** menu links here **
 </ul>
 </div>

 <div class="menucat">
 <ul class="menuitem">
   *** menu links here ***
 </ul>
 </div>
 </div>
 </div>
 </div>

Answer 1

You'll need code to remember which mode the menu is in. Let's call the modes, for instance, "hover" and "stay"

When the menu is clicked, the mode will be toggled. Also, you'll have to change what your hover event does according to the mode. (ie if the mode is "hover", do normal show/hide; if the mode is "stay", do nothing)