当用户点击父菜单时隐藏下拉菜单

Question

导航栏会有多个菜单，每个菜单可以有子菜单。当用户将鼠标悬停在菜单 div - 父级上时（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>

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