JavaScript Dropdown Menu animation is buggy

I’m working on a website built with Mura. The header contains multiple dropdown menus that, in theory, fade in and out as you hover over them with the mouse. The code for this functionality is as follows (written in JavaScript):

$('.mura-megamenu li.dropdown).hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})

The fadeIn works fine. But whenever the mouse moves away, it doesn’t fade away; it hangs for a moment before disappearing without any fade.

It’s also incredibly jarring because the different dropdowns are layered on top of each other (dropdowns on the left of the header are “beneath” dropdowns on the right), so if you move from a dropdown on the right to the left, the left dropdown fades in beneath the dropdown on the right, defeating the purpose of the animation entirely.

Anyone know of any fixes for this? I would think the above code would work just fine. I’ve also added console.log() statements for hover and unhover, which register as intended.