mouseover and mouseout events jQuery
<p>I am creating a DIV menu when the user mouseover an icon. The div menu also has two child divs which have onclick events. When I mouse over the icon the menu div appears but when I am about to select the child divs the main menu div hides. </p>

<pre><code>     &lt;div id="actionMenu" style="display:none;width:40px;height:30px;background-color:white;z-index:9"&gt;
            &lt;div id="addRowDiv"&gt;Add&lt;/div           &gt;
            &lt;div id="deleteRowDiv"&gt;Delete&lt;/div&gt;
        &lt;/div&gt;

$(actionImage).mouseover(function(e) {

        // get the coordinates
        var x = e.pageX - 40;
        var y = e.pageY - 10;

        $("#actionMenu").css({

            position:"absolute",
            top: y + "px",
            left: x + "px"
        });   


        $("#actionMenu").attr("rowId", $(td).parent().attr("id"));

        $("#actionMenu").show();
    });

$("#actionMenu").mouseout(function() {

        $(this).hide();

    });


    $("#actionMenu").find("#addRowDiv").click(function() {

        alert('add row clicked');

    });     
</code></pre>

<p><strong>UPDATE 1:</strong> </p>

<p>I have a table which is populated with data. One of the columns is an icon (actionImage). When I hover over the icon I want to display the div menu (done). The div menu has two child divs (add and delete). Now, when I hover over the child divs the main div (actionMenu) disappears. Why does it disappear since the child divs are inside the action menu div? </p>
