我需要的是为我的下拉菜单提供平滑的悬停效果。为什么jQuery悬停效果不起作用？

$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);不适合我。当鼠标悬停时，效果不起作用。

$(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 

    // breakpoint and up 
    $(window).resize(function() { 
     if ($(window).width() >= 980) { 
      // when you hover a toggle show its dropdown menu 
      $(".navbar .dropdown-toggle").hover(function() { 
       $(this).parent().toggleClass("show"); 
       $(this).parent().find(".dropdown-menu").toggleClass("show"); 
       $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); 
      }); 

      // hide the menu when the mouse leaves the dropdown 
      $(".navbar .dropdown-menu").mouseleave(function() { 
       $(this).removeClass("show"); 
      }); 
      // do something here 
     } 
    }); 
    // document ready 
    //wow.js init 
    new WOW().init(); 
}); 

这是我的HTML标记。我正在使用bootstrap 4最新版本。我能做什么用jQuery的平稳悬停效果或JavaScript

class="header_area">