Automatically showing div on mouseover
<p>This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.</p>

<p>I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.</p>

<p>In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.</p>

<p>I use the following code to make this happen:</p>

<pre><code>$("div.editable").hover(function () {
    $(this).fadeTo(500, 0.25);
    $('#Menu').css("position", "absolute");
    $("#Menu").css("top", $(this).offset().top);
    $("#Menu").css("left", $(this).offset().left);
    $("#Menu").css("zIndex", "10000");
    $('#Menu').show();
 }, function (e) { // on mouseout
    $(this).fadeTo(500, 1);
    $("#Menu").hide();
 });
</code></pre>

<p>I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.</p>

<p>Does anyone have an idea of how I could edit my code to make this work correctly? </p>

<p>Thank you very much for any help you can give me.</p>
