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

[sourabhgkr]

here is the code for menu.

(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"                     
    });           
   });
});

HTML code

<div id="sub-link-bar"> </div>

      <div id="wrap">

        <div class="roundfg">
  <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
        <ul class="sub-links">
            <li><a class="main-link" href="#">Home</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
      <ul class="sub-links">
        <li><a href="#" >Design</a> </li>
        <li><a href="#">HTML &amp; CSS</a> </li>
        <li><a href="#" >Other</a> </li>
        <li><a href="#">PHP</a> </li>
        <li><a href="#">Ruby</a> </li>
        <li><a href="#">Site Builds</a> </li>
        <li><a href="#">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
      </ul>
    </li>


    <li><a class="main-link" href="#">Videos</a>
        <ul class="sub-links">
        <li><a href="#">Screencasts</a> </li>
        </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
        <ul class="sub-links">

        </ul>
    </li>         
  </ul>
</div>

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.

[PcPro12]

May I propose a slight modification to your code? You've got the right idea, but it can be done with a little less jQuery code than what you have. I hope this is what you were looking for.

Also, you don't need the "main-link" classes, so feel free to remove those.

HTML

<nav>
  <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
        <ul class="sub-links">
            <li><a class="main-link" href="#">Home</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
      <ul class="sub-links">
        <li><a href="#" >Design</a> </li>
        <li><a href="#">HTML &amp; CSS</a> </li>
        <li><a href="#" >Other</a> </li>
        <li><a href="#">PHP</a> </li>
        <li><a href="#">Ruby</a> </li>
        <li><a href="#">Site Builds</a> </li>
        <li><a href="#">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link" href="#">Videos</a>
        <ul class="sub-links">
        <li><a href="#">Screencasts</a> </li>
        </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
        <ul class="sub-links">
        </ul>
    </li>         
  </ul>
</nav>

jQuery

$(document).ready(function(){

    //When the mouse hovers over the 'li' tag, show the subs with a class of 'sub-links'
    $('li').hover(function() {
        $(this).children(".sub-links").stop().show(250);

        //When the mouse is moved away from the link, hide that submenu
    },function() {
        $(this).children(".sub-links").stop().hide(250);
    });
});

CSS

/* This hides the submenu 
This code must be included or your submenu
won't be hidden when the page loads */

.sub-links {
    display: none;
}