setTimeout() and dynamic menu dropdown

setTimeout() and dynamic menu dropdown

I'm building a dynamic menu with CMS Drupal 7 and Views.

This is the structure:

Menu 1
Menu 2
Menu 3

When hovering on the first menu link (Menu 1), it will display a div that will show dynamic content.
So far hovering works great and after mouseleave in 2 seconds the div will disappear.
setTimeout() function works fine, but I want when hovering the menu link and after that hovering the div to not be hidden after 2 seconds. What function do I have to add?

This is my code:



  1. (function($){
        $(document).ready(function(){
            $('#navigation li:first-child').hover(function(){
                $('.view-news-last').fadeIn(200);
            });
            $('#navigation li:first-child').mouseleave(function(){
                setTimeout(function() {
                    $('.view-news-last').hide();
                }, 2000);
               
            });
        });
    })(jQuery);