Dropdown should not have pointer-events during fadeToggle (fade out) [on hold]

I've been wrecking my brains with this problem: I have a menu with a dropdown that fades away in 150ms, on mouse out. During that time, if my cursor enters the area of the dropdown, the fade out aborts and the dropdown is visible again. I have this code: $(".menu > ul > li").hover(function (e) { if ($(window).width() > 943) { $(this).children("ul").stop(true, false).fadeToggle(150); e.preventDefault(); } }); My first thought is to somehow toggle a class called "noPointerEvents" to the dropdown div, and add css to it: $(".menu > ul > li > ul").onmouseout(function () { $(this).toggleClass("noPointerEvents"); }); And the css: .noPointerEvents{ pointer-events: none; } But the class doesn't seem to toggle when I hover over the menu a second time. Here is a demo: http://mateitudor.com/megamenu/ It is a template from here: http://github.com/marioloncarek/megamenu-js And here is a video of the bug I want to get rid of: http://mateitudor.com/megamenu/megamenu-dropdown-bug.mov Help would be very appreciated. Thank you.