Need help on JQuery mouseover on menu with submenus

I have this menu (@ jsFiddle) where this will happen given the following mouse events:

1. Hover on Movies
2. Then start dragging mouse to mouseover on Movie library
3. While dragging you accidentally touch the Home menu item
4. Causing the Home submenu to appear and hiding the Movies subm开发者_Go百科enu.

This is not the desired effect i want. So im seeking some assistance. How can i solve this so that if im dragging my mouse and i accidentally touch some of the other menu options, the javascript will be smart enough to know that it shouldn't hide the selected submenu.

Can i add some kind of delay on the hover? All help is appreciated!

You can use hoverIntent to throttle mousein/mouseouts events to prevent accidential firing (you need this I think...). Check examples on hiverIntent's site. You'll like it.

I think this plugin fits exactly for what you want to do : http://cherne.net/brian/resources/jquery.hoverIntent.html

I hope this is what you want. If not, i'm sure it will guide you to the final solution

$().ready(function(){
    $('ul.menu').hover(function(event){       
        var hoverItem = event.target;
        //hide other ul's submenu
        $(hoverItem).siblings('li').children('ul').stop(true,true).hide()
        //show current submenu
        $(hoverItem).children('ul').stop(true,true).fadeIn()
    },function(event){
        //console.log(event.target);
        $('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut()
    })
});

Hope to have helped you. Cheers