I created a fiddle

jsfiddle.net/ExaLM/1

Now the sub navigation bar is closing on mouse leave event.

But if I hover on sub link bar then also sub link bar closes.

So what changes should I make in my code for that?

code is

Code:
 $(document).ready(function(){                     
    $("#main-nav li a.main-link").hover(function(){  

        $("#main-nav li a.main-link").removeClass("active");                                                   
        $(this).addClass("active");                                        
        $("#sub-link-bar").animate({  
            height: "40px"                       
        });  
        $(".sub-links").hide();  
        $(this).siblings(".sub-links").fadeIn();  
    });  
    $("#main-nav li a").mouseleave(function(){  
        $("#main-nav li a.main-link").removeClass("active");                                                                                       
        $(".sub-links").fadeOut();  
        $("#sub-link-bar").animate({  
            height: "10px"                       
        });       

    });   
});
Please reply.Thanks.