I want the sub-menu to remain open when the mouse moves over it

Question

I have a menu, this menu in some items has sub-menus.

I'm using XHTML + CSS to create the main menu and sub-menu, also I'm using native javascript to show and hide the sub-menus, when the user move the mouse over the item that has sub menu.

When move the mouse to the item which contains sub-menu, the sub-menu appears, but when move the mouse cursor to the the sub-menu, the sub-menu disappear.

What I want is, the sub-menu remain visible if the mouse cursor over the item that in main menu or on the items that in sub-menu

HTML

<div class="box">
<ul>
    <li class="havSub">Item 1
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> </li>
                <li> <a href="#"> Sub 2 </a> </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 2 </a> </li>
    <li> <a href="#"> Item 3 </a> </li>
    <li class="havSub">Item 4
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> 
                </li>
                <li> <a href="#"> Sub 2 </a> 
                </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 5 </a> 
    </li>
</ul>

CSS

.box{width:150px; border:2px solid #ccc; text-align:center; margin-top:50px;}
.box ul {padding:0; margin:0; list-style-type:none;}
.box ul li {margin-bottom:1px; display:block; padding:5px; background-color:#fff000; color:#ff0000; font:bold 20px arial; cursor:pointer;}
.box ul li:hover {background-color:#ffff00; color:#ff0000;}
.box ul li a {display:block; color:#ff0000; font:bold 20px arial; text-decoration:none;}
.box ul li div {position:relative; left:145px; top:-29px; display:none;}
.box ul li div ul {position:absolute;}

Javascript

document.addEventListener('mouseover', function (event) {
    event = (event) ? event : window.event;
    if (event.target.className === 'havSub') {
        event.target.children.item(0).style.display = 'block';
        event.target.addEventListener("mouseout", function () {
            event.target.children.item(0).style.display = 'none';
        });
    }
});

You can see JSFiddle demo

Answer 1

You can fix this problem quite easily while removing the need for jQuery by using the following code

.box ul li:hover * {
    display:block;
}

Demo

It works for any browser that supports CSS2, so IE7+

Answer 2

If you're looking for a more compatible solution, meaning serving IE6, here's the core of the issue:

The link on the submenu fires on the onmouseout event of the main menu. You can place a flag on the DOM object itself to schedule a deferred onmouseout. When a onmouseover event is detected on the submenu, the timer event is canceled. The responsibility to close the menu is now forwarded to the submenu.

$('main').onmouseout=function(){
    this.closing=setTimeout(function(){
        //close the menu here
    },300); //allow enough time to move on to the sub menu
}

$('sub').onmouseover=function(){
    //cancel the closing event
    if ($('main').closing) clearTimeout($('main').closing);

    this.onmouseout=function(){
      //close the menu here
    }
}