keeping sub menu open on hover and close sub menu on mouse move down or scrolling

keeping sub menu open on hover and close sub menu on mouse move down or scrolling

here is the code for menu. 

   
    
    
  1. (document).ready(function(){
    2. 
    

    3. 
    
  3. $("#main-nav li a.main-link").hover(function(){
    4. 
    
  4. $("#main-nav li a.main-link").removeClass("active"); 
    5. 
    
  5.  $(this).addClass("active"); 
    6. 
    
  6.  $("#sub-link-bar").animate({
    7. 
    
  7.  height: "40px" 
    8. 
    
  8.  });
    9. 
    
  9.  $(".sub-links").hide();
    10. 
    
  10.  $(this).siblings(".sub-links").fadeIn();
    11. 
    

    12. 
    
  12. });
    13. 
    

    14. 
    

    15. 
    
  15.  $("#main-nav").mouseleave(function(){ 
    16. 
    

    17. 
    
  17.  $("#main-nav li a.main-link").removeClass("active"); 
    18. 
    
  18.  $(".sub-links").fadeOut();
    19. 
    
  19.  $("#sub-link-bar").animate({
    20. 
    
  20.  height: "10px" 
    21. 
    
  21.  }); 
    22. 
    
  22.  });
    23. 
    
  23. });
    24. 
   

HTML code


    
    
     
  1. <div id="sub-link-bar"> </div>
    2. 
     

    3. 
     
  3.  <div id="wrap">
    4. 
     

    5. 
     
  5.  <div class="roundfg">
    6. 
     
  6.  <ul id="main-nav">
    7. 
     
  7.  <li><a class="main-link" href="#">Home</a>
    8. 
     
  8.  <ul class="sub-links">
    9. 
     
  9.  <li><a class="main-link" href="#">Home</a></li>
    10. 
     
  10.  </ul>
    11. 
     
  11.  </li>
    12. 
     
  12.  <li><a class="main-link" href="#">Tutorials</a>
    13. 
     
  13.  <ul class="sub-links">
    14. 
     
  14.  <li><a href="#" >Design</a> </li>
    15. 
     
  15.  <li><a href="#">HTML &amp; CSS</a> </li>
    16. 
     
  16.  <li><a href="#" >Other</a> </li>
    17. 
     
  17.  <li><a href="#">PHP</a> </li>
    18. 
     
  18.  <li><a href="#">Ruby</a> </li>
    19. 
     
  19.  <li><a href="#">Site Builds</a> </li>
    20. 
     
  20.  <li><a href="#">Tools &amp; Tips</a> </li>
    21. 
     
  21.  <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
    22. 
     
  22.  </ul>
    23. 
     
  23.  </li>
    24. 
     

    25. 
     

    26. 
     
  26.  <li><a class="main-link" href="#">Videos</a>
    27. 
     
  27.  <ul class="sub-links">
    28. 
     
  28.  <li><a href="#">Screencasts</a> </li>
    29. 
     
  29.  </ul>
    30. 
     
  30.  </li>
    31. 
     
  31.  <li><a class="main-link" href="#">About</a>
    32. 
     
  32.  <ul class="sub-links">
    33. 
     

    34. 
     
  34.  </ul>
    35. 
     
  35.  </li> 
    36. 
     
  36.  </ul>
    37. 
     
  37. </div>
    38.

The sub menu hides when mouse leaves the main menu.

But if mouse is over sub menu,then also sub menu hides.

So 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

Please reply. Thanks.