Question

Suppose I have a menu and when I am hovering specific element on the menu #sub: another menu is sliding down .subnav.

how can I achieve that:

when (‘.subnav’) is down and i am not hovering him and and also not hovering (‘#sub’), (‘.subnav’) will slide up.

i tried to do that with not filter .

Html:

<ul class="topnav">
        <li><a href="#">Home</a></li>
        <li id="sub"><a href="#">slide</a>   
            <ul class="subnav">
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
            </ul>
       </li>
</ul>

Js:

 $('.topnav #sub').hover(function() {
    $(this).children('.subnav').slideDown('fast');

    $(':not(#sub,#subnav)').hover(function () {
        $('#sub .subnav').slideUp('fast');
    });      
}); 

Thanks a lot(and please explain the best way).

Answer 1

$(':not(#sub,#subnav)').hover(function () { basically means “when anything that is not #sub or #subnav, do something (additionally, you’re attaching the handler several times)

What you want is

$("#sub").hover(
  function(){
    $(this).children('.subnav').slideDown('fast');
  },function(){
    $(this).children('.subnav').slideUp('fast');
  }
}

jQuery#hover takes one or two functions as arguments. If two functions are supplied, the first one is called on mouse enter, and the second one is called on mouse leave. If one function is supplied, it is called on both occasions.
Documentation: http://api.jquery.com/hover/

Note that if .subnav is hovered, so is #sub, so you don’t need to check both.