导航栏将有多个菜单，每个菜单都可以有子菜单。当用户在菜单div-parent上悬停（mouseenter&mouseleave）时，子菜单出现。但用户可以单击父url，然后打开另一个具有相同导航菜单的页面，当前如果用户转到该页面，则父菜单已经打开。我希望它在默认情况下关闭，与此gif视频中相同：https://imgur.com/a/oek8exd

var el = document.querySelector("#menu");

el.addEventListener("mouseenter", function() {
  console.log("mouseenter");
  document.querySelector("#submenu").classList.remove("hidden");
})

el.addEventListener("mouseleave", function() {
  console.log("mouseleave");
  document.querySelector("#submenu").classList.add("hidden");
})

.hidden {
  display: none;
}

<div id="menu" style="padding: 10px; background: gray;">
  <a href="./index.html">menu</a>
</div>

<div id="submenu" class="hidden">
  <ul>
    <li>submenu1</li>
    <li>submenu2</li>
  </ul>
</div>

在这里找不到类似的问题，但我相信这是重复的。