如何强制一个父菜单项的所有子菜单级别在悬停时处于活动状态(mega菜单)

<nav>
  <ul class="menu">
    <li class="parent">
      <a href="#">父菜单项</a>
      <ul class="submenu">
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
        <li><a href="#">子菜单项3</a></li>
      </ul>
    </li>
    <li><a href="#">其他菜单项</a></li>
  </ul>
</nav>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.parent {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.parent:hover .submenu {
  display: block;
}

const parentItem = document.querySelector('.parent');

parentItem.addEventListener('mouseenter', function() {
  this.classList.add('active');
});

parentItem.addEventListener('mouseleave', function() {
  this.classList.remove('active');
});