导航栏子菜单移出导航链接时不消失的技术问题求助

我正在尝试创建一个支持hover交互、可显示/隐藏子菜单（submenu）的导航栏（navbar）。

HTML代码 #

<nav>
  <div class="logo">
    <img src='https://cdn.iconscout.com/icon/free/png-256/creative-68-225308.png'>
  </div>
  <div class="nav-links">
    <ul>
      <li><a href="#">Home</a></li>
      <li class='about'>
        <a href="#">About</a>
        <ul class='about-submenu'>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our History</a></li>
          <li><a href="#">Our Vision</a></li>
        </ul>
      </li>
      <li class='services'>
        <a href="#">Services</a>
        <ul class='svcs-submenu'>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS代码 #

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(198, 206, 206);
}

.logo img {
  width: 3.5rem;
}

nav ul {
  list-style: none;
}

nav ul a {
  text-decoration: none;
  color: black;
}

nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 15rem 0 15rem;
}

.nav-links ul {
  display: flex;
  justify-content: space-between;
  gap: 4em;
}

ul.about-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 100px;
  background-color: azure;
  border-radius: 10px;
}

ul.svcs-submenu {
  position: absolute;
  display: none;
  padding: 15px 15px 0px 15px;
  margin-top: 10px;
  width: 140px;
  background-color: aqua;
  border-radius: 10px;
}

ul.about-submenu li,
ul.svcs-submenu li {
  margin-bottom: 15px;
}

ul.about-submenu li a:hover,
ul.svcs-submenu li a:hover {
  color: brown;
}

JavaScript代码 #

const about = document.querySelector('.about')
const services = document.querySelector('.services')
const abtDrpdwn = document.querySelector('ul.about-submenu')
const svcDrpdwn = document.querySelector('ul.svcs-submenu')

about.addEventListener('mouseenter', () => {
  abtDrpdwn.style.display = 'block'
})

abtDrpdwn.addEventListener('mouseleave', () => {
  abtDrpdwn.style.display = 'none'
})

我尝试使用mouseenter/mouseover事件触发子菜单显示，使用mouseleave事件触发子菜单隐藏。

鼠标hover导航链接时子菜单正常显示，移出子菜单时子菜单正常消失，但移出导航链接时子菜单不会消失。

鼠标移出导航链接或子菜单时，子菜单均会消失。

现寻求解决方案，希望解决该交互问题。

内容的提问来源于stack exchange，提问作者Mike Will