Выподающие на меню javascript почему пропадает?

Question

[Mestniydevil]

Делаю меню не могу понять. Почему оно пропадает? Идея такая что оно должно пропасть если курсор покинул область меню. Но меню пропадает когда курсор в ней.

<div id="m" onmouseout="ChangeOut()"  style="display: none; background: #5f646b;position:absolute; width: 100px;top: 50px;left: 50px;cursor: default" >
    <i>Menu item 1</i>
    <i>Menu item 2</i>
    <i>Menu item 3</i>
    <i>Menu item 4</i>
</div>

<div id="user">
<div id="1"  style="width: 100px;height: 100px;background: red;float: left;cursor: pointer"></div>
<div id="2"  style="width: 100px;height: 100px;background: black;margin-left: 120px;cursor: pointer"></div>
</div>

<script>
    var buttons = document.getElementById('user');
    buttons.onclick = function(e) {
        var id = e.target.id;
        document.getElementById('m').style.display='block';
        document.getElementById('m').style.left=event.pageX;
        document.getElementById('m').style.top=event.pageY;
    };
    function ChangeOut() {
        document.getElementById('m').style.display='none';
    }
</script>

Answer 1

[0xD34F]

Потому что событие mouseout возникает, когда курсор уходит на какой-либо из вложенных элементов - в вашем случае это i. Замените mouseout на mouseleave. А ещё почитайте - будет нелишним.