Question

I have made a simple dropdown menu, this works fine but i want to add some space between the button and the dropdown menu(between bottom button/link and top dropdown menu).

The issue, if i dont add space between the button and dropdown menu it works fine, but once that i add space between them the dropdown menu goes back to hide once i leave the button.

I can make the li taller on hover but the li has style attached to it so i cant do much with this(also the a elements has fixed style attached to it).

So how can i keep the dropdown menu alive if its got space between it if i hover its parent li?

The jQuery code

    $('#sub-menu li').hover(function(){
        $(this).children('ul').stop(true,true).fadeIn(100);
    },function(){
        $(this).children('ul').stop(true,true).fadeOut(100);
    }); 

Basic html code

<div>
    <ul>
        <li><a href="#">link</a>
            <ul>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
            </ul>
        </li>
    </ul>
</div>   

Answer 1

The typical way to do this is to set up a timer to close the submenu on the parent’s mouseleave event, but cancel the timer if you mouseenter on the submenu. Setting this timer for 150-250ms usually gives plenty of time for a moderately slow-moving mouse to preserve the intended behavior, but doesn’t feel too laggy when the menu is intended to close.

Not tested, more like pseudocode, just to show the general approach:

var submenuTimer = null;

$('#sub-menu li')
   .mouseenter(function(){
      $(this).children('ul').stop(true,true).fadeIn(100);
   })
   .mouseleave(function{
      submenuTimer = 
       setTimeout(
        function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200
       );
   }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });