jQuery hover and mouseout for drop-down menu

Question

I'm trying to create a simple sub-navigation drop-down menu. When then user hovers over a trigger the #sub-nav fades in with a drop-down menu then when the user moves the mouse away it fades out. This does happen, but when the mouse moves over the nested li's it fades out then in again and I can't figure out why?

<ul id="sub-nav">
    <li class="sub sub-profile"><a href="#">Your Profile</a></li>
    <li class="sub sub-upgrade"><a href="#">Upgrade</a></li>
    <li class="sub sub-signout"><a class="last" href="#">Sign Out</a></li>
</ul>

$('#header-user a').hover(function() {
        $('#sub-nav').fadeIn('400');
    });

    $('#sub-nav').mouseout(function(){
        $('#sub-nav').fadeOut('400');
    });

Any help would be appreciated, Jack.

Answer 1

Try this, hope it will help

$('#header-user a').mouseout(function(){
    $('#sub-nav').fadeOut('400');
});

Also you can try:

$("#header-user a").hover(
   function() {
      $('#sub-nav').fadeIn('400');
   },
   function() {
      $('#sub-nav').fadeOut('400');
   }
);

OR

$("#header-user a").on('mouseenter',function(){
   $('#sub-nav').fadeIn('400');
});
$("#header-user a").on('mouseleave',function(){
  $('#sub-nav').fadeOut('400');
});