The problem is you are using the wrong event, you want to use mouseleave
instead of mouseout
, take a look at the following list of events that you can use:
mouseenter / mouseout
mouseover / mouseleave
You've already learned the difference between both pairs (including or not inner elements) and you were mixing from the two groups.
So you just need to change your following line:
$('#sub-menu').mouseout(function() {
for this one:
$('#sub-menu').mouseleave(function() {
See working demo .