Adding hoverintent to ajax dropdown menu

I'm working on a mega dropdown menu that is loaded via ajax. I would like to add hover intent to the menu but I haven't been able to locate a good example of combining .live() with hoverintent it.

I would like to delay the hover for a few seconds to give the other menus a head start on collapsing.

<script type="text/javascript">
$(document).ready(function(){

    $('li.top-nav-links').live('mouseenter', function() {
           $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
           $(this).find('div').slideDown(300);
           $(this).css('z-index', 9000 );      
    });

    $(开发者_如何转开发'li.top-nav-links').live('mouseleave', function() {
           $(this).find('div').slideUp(function() {
                   $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
               });
               $(this).css('z-index', 8000 ); 
    });

});
</script>

Notes: Basically it's an unordered lists that reveals a hidden div inside of it. The z-index reorders the most current hovered drop down to the top

This is what ended up working. I'm not totally sure why .live() isn't required because it's loaded Via Ajax. I guess that's what sent me astray.

$(document).ready(function(){

    var overFn = function(){
        $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
        $(this).find('div.sub').slideDown(300);
        $(this).css('z-index', 9000 );
         return false;
    };

    var outFn = function(){
        $(this).find('div.sub').slideUp(280, function() {
           $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
           });
         $(this).css('z-index', 8000 ); 
    }; 

    $('li.top-nav-links').hoverIntent({ 
        over: overFn, 
        out: outFn 
    });

});

Note: .live() was required prior to adding hoverIntent.

Update: The code above worked on the test site. However, once we moved it over to the live site we needed to make a change because it stopped firing the hoverIntent. and I found this post by RANDOM.NEXT() very helpful in finding our resolution -- http://bit.ly/D4qr9

This is the final final code:

jQuery(function()  
{  
    $('li.top-nav-links').live('mouseover', function()  
    {  
        if (!$(this).data('init'))  
        {  
            $(this).data('init', true);  
            $(this).hoverIntent  
            (  
                function()  
                {  
                    $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
                    $(this).find('div.sub').slideDown(300);
                    $(this).css('z-index', 9000 );
                     return false; 
                },  

                function()  
                {  
                    $(this).find('div.sub').slideUp(280, function() {
                       $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
                       });
                     $(this).css('z-index', 8000 ); 
                }  
            );  
            $(this).trigger('mouseover');  
        }  
    });  
});

<script type="text/javascript">
$(document).ready(function(){
    var config = {  
        // put hoverIntent options here    
    };
    $('li.top-nav-links').live('hoverIntent', config, function() {
           $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
           $(this).find('div').slideDown(300);
           $(this).css('z-index', 9000 );      
    });

    $('li.top-nav-links').live('mouseleave', function() {
           $(this).find('div').slideUp(function() {
                   $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
               });
               $(this).css('z-index', 8000 ); 
    });

});
</script>