Question

I want to create a submenu that appears when mouse over the item of the menu. I face a problem that I want the submenu to disappear when the mouse are away from the submenu, for example the mouse move to the bottom or to the right or left side of the website.

here’s the script of my menu ,I make a sapmle of my menu in jsfiddle http://jsfiddle.net/2jUQS/1/

<div id="header">
   <ul id="menu">
    <li>
        <a href="#" class="wordsMenu">About Company</a>
    </li>
    <li>
        <a href="#" class="galaryMenu">Gallary</a>
    </li>

 </ul>
</div>
    <div id="submenus">
         <div id="galarySubMenu" class="subMenuContainer">
    <ul class="subMenuList">
        <li><a href="PhotoGallery.php">Photo Gallary</a></li>
        <li><a href="videoGallery.php">Video Gallary</a></li>
    </ul>
</div>

</div>

and here is the script

$("document").ready(function(){


  $("a.wordsMenu").bind( 'mouseover',function(){
    $("#galarySubMenu").fadeOut("fast");
  });

 $("a.galaryMenu").bind( 'mouseover',function(){


    $("#galarySubMenu").css("display","block");
    var margin_top = $("#header").height();
    var testMarginTop=parseInt($("#galarySubMenu").css("top"));
    if(testMarginTop<0){
        $("#galarySubMenu").animate({
            'top':margin_top-2
        }, {
        'duration':500,
        queue:false
    });
    }
    else{
        $("#galarySubMenu").animate({
            'top':'-300'
        },  {
        'duration':500,
        queue:false
    });
    }
});

/*
 $(".subMenuList").mouseout(function(){
      $("#galarySubMenu").fadeOut("fast");
});
*/

 });

Answer 1

append this to you jquery code

    $("#submenus").on('mouseleave',function(){
        $("#galarySubMenu").animate({
                'top':'-300'
            },  {
            'duration':500,
            queue:false
        })
    })

hope this helps

I just added a handler on the whole submenus div that when mouseleaves it fades out