Javascript-форум - javascript menu

Привет всем, нужна помощь в решение одного простого вопроса. Есть меню

<ul id="js_menu" class="js_menu">
    <li class="item_el" id="id-el-1">item1</li>
    <li class="item_el disabled" id="id-el-2">item2</li>
    <li class="item_el" id="id-el-3">item3</li>
    <li class="item_el has_sub_menu" id="id-el-4">item4
        <ul class="sub_menu">
            <li class="item_el" id="id-el-5">item1</li>
            <li class="item_el has_sub_menu" id="id-el-6">item2
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-7">item1</li>
                    <li class="item_el" id="id-el-8">item2</li>
                    <li class="item_el" id="id-el-9">item3</li>
                    <li class="item_el" id="id-el-10">item4</li>
                </ul>
            </li>
            <li class="item_el" id="id-el-11">item3</li>
            <li class="item_el has_sub_menu" id="id-el-12">item4
                <ul class="sub_menu">
                    <li class="item_el" id="id-el-13">item1</li>
                    <li class="item_el" id="id-el-14">item2</li>
                    <li class="item_el" id="id-el-15">item3</li>
                    <li class="item_el" id="id-el-16">item4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

При наведение на пункт которые вмещает в себя sub_menu как мне сделать так чтоб оно не закрывалось ?

(function () {

    document.oncontextmenu = function () {
      return false;
    };

document.addEventListener('mouseover', mouse_over, false);

    function mouse_over(e) {
        var elem = e.target;
        
        if(elem.tagName == 'LI'){

            var cur_el_id = elem.getAttribute('id');
            var relatedTarget = e.relatedTarget;
            elem.className = elem.className + ' active';

            //var children = elem.parentElement.children;

            //relatedTarget.className = relatedTarget.className.replace(/ active/, '');

        }
    }

})()

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> li{ position: relative; } li > .sub_menu { display: none; } li:hover > .sub_menu { display: block; margin-left: 10px; position: absolute; top: 0px; left: 10px; } </style> <script> </script> </head> <body> <ul id="js_menu" class="js_menu"> <li class="item_el" id="id-el-1">item1</li> <li class="item_el disabled" id="id-el-2">item2</li> <li class="item_el" id="id-el-3">item3</li> <li class="item_el has_sub_menu" id="id-el-4">item4 <ul class="sub_menu"> <li class="item_el" id="id-el-5">item1</li> <li class="item_el has_sub_menu" id="id-el-6">item2 <ul class="sub_menu"> <li class="item_el" id="id-el-7">item1</li> <li class="item_el" id="id-el-8">item2</li> <li class="item_el" id="id-el-9">item3</li> <li class="item_el" id="id-el-10">item4</li> </ul> </li> <li class="item_el" id="id-el-11">item3</li> <li class="item_el has_sub_menu" id="id-el-12">item4 <ul class="sub_menu"> <li class="item_el" id="id-el-13">item1</li> <li class="item_el" id="id-el-14">item2</li> <li class="item_el" id="id-el-15">item3</li> <li class="item_el" id="id-el-16">item4</li> </ul> </li> </ul> </li> </ul> </body> </html>