The code for menu 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").mouseleave(function(){

    $("#main-nav li a.main-link").removeClass("active");
    $(".sub-links").fadeOut();
    $("#sub-link-bar").animate({
    height: "10px"
    });
    });
    });



The link for my code is

http://jsfiddle.net/zU4Q8/

I want to add functionality so that sub menu is hidden only if

1) mouse is moved down of main menu

2) if page is scrolled down

3) keep sub menu open if hover on sub menu

Please reply. Thanks.