A good solution would be to change your markup, and wrap both elements (#login
and #topmenu
). Then bind the mouseleave
handler to their parent.
HTML:
<div class="loginWrapper">
<div id="login">
<a href="#tm-u">1</a>
<a href="#tm-e">1</a>
<a href="#tm-n">1</a>
</div>
<div id="topmenu">
stuff
</div>
</div>
JS:
$('.loginWrapper').mouseleave(function(){
$('#topmenu').css('display', 'none');
});
This way, your mouse will have to leave the wrapper, and all of it's children, in order to fire.