I have inherited a website and have been requested to change a navigation menu. The issue with the menu is that when a user hovers over a selection and wants to select a submenu item, they sometimes catch the edge of an adjacent parent item. This instantly changes the submenu selection. I would like to add a delay or someother type of logic so that the submenu does not change unless there is clear inention of selection. I have already looked at hoverIntent and this looks like exactly what I need. However, the menu appears to use "mouseenter" and "mouseleave" rather than hover. I am a complete n00b and have zero clue how to get this working. Below is the code, and you can see the menu in action here; http://www.clarity101.com many thanks to any help provided.

Code:
 // main sub menu effect
    jQuery(".nav > li").not(".nav ul li").bind('mouseenter',function(){
        var submenu = jQuery(this).find( '.sub' );
        if(jQuery('#content').css('margin-top')!='10px' && jQuery('#content').css('margin-top')!='0px'){
            // fast transition
            jQuery('#content').clearQueue();
            jQuery('#content').stop();
            jQuery('#content').css('margin-top','265px');
            jQuery('.nav li .sub').clearQueue();
            jQuery('.nav li .sub').stop();
            jQuery('.nav li .sub').hide();
            jQuery(submenu).show();
            
        }else{
            //normal transition
            jQuery('#content').clearQueue();
            jQuery('#content').stop();
            jQuery('.nav li .sub').clearQueue();
            jQuery('.nav li .sub').stop();
            jQuery('.nav li .sub').slideUp(500);
            jQuery('#content').animate({'margin-top':'10px'},500,function(){
                jQuery(submenu).slideDown(500);
                jQuery('#content').animate({'margin-top':'265px'},500);
            });
        }
    });
    jQuery(".nav > li").not(".nav ul li").bind('mouseleave',function(){
        jQuery('#content').clearQueue();
        jQuery('#content').stop();
        jQuery('.nav li .sub').clearQueue();
        jQuery('.nav li .sub').stop();
        jQuery('.nav li .sub').delay(500).slideUp(500);
        jQuery('#content').delay(500).animate({'margin-top':'10px'},500,function(){
            jQuery('.nav li .sub').removeAttr('style');
        });
    });