Javascript 在鼠标经过定时后激活弹出菜单，然后在鼠标离开时取消激活

我正在尝试创建一个菜单，当您将鼠标悬停在某个元素上一段时间后，该菜单将出现。如果将鼠标悬停在该元素上，但在设置的时间之前将鼠标移出，则不会显示菜单。这样做是为了防止用户在快速移动鼠标时意外激活菜单

默认情况下，菜单设置为

display:none在我的CSS中。然后，当它们成功地悬停足够长的时间时，我向其添加一个
.active
类，以将显示设置为
块。

我的问题是，一旦鼠标在元素上停留足够长的时间（在我的测试用例中，我将其设置为1秒），鼠标移到新显示的菜单上即算作鼠标出，我将丢失菜单。因为菜单是我正在听的元素的子元素，所以我假设它仍然可以算作在该元素上移动鼠标。我猜我错了

这是我努力实现的一个很好的例子

这是我的HTML

<div id="drop-nav-trigger">
  Menu

  <div class="drop-nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </div>

</div>

这是一个密码笔：
这个技巧是使用
mouseleave
而不是
mouseout

mouseleave事件在处理事件的方式上与mouseout不同
冒泡。如果本例中使用了mouseout，则当鼠标
指针移出内部元素时，处理程序将
触发。这通常是不受欢迎的行为。“无鼠事件”，
另一方面，仅当鼠标离开时才触发其处理程序
它绑定到的元素，而不是后代。所以在这个例子中
当鼠标离开外部元素时，会触发处理程序，但不会触发
内在因素

资料来源：

var timeoutId = null;
var el = document.getElementById("drop-nav-trigger");

/* Activate menu after a delay. */
el.addEventListener('mouseover',function() { 
                   timeoutId = window.setTimeout(function(){

  $(".drop-nav").addClass("active");

  }, 1000);
} );

// Cancel action if mouse moved out within 2 sec
 el.addEventListener('mouseout',function() {
  window.clearTimeout(timeoutId);
  $(".drop-nav").removeClass("active");
});