Javascript 如何取消由'；悬停子对象'；事件选择器？

我正在制作一个基于CSS的菜单，当根元素悬停时，子菜单项会弹出。我的问题是，当我单击列表中的某个项目时，我希望CSS菜单关闭，但从技术上讲，我仍然停留在顶部元素上，所以我想我必须使用javascript隐藏菜单。但是当我设置display属性时，我将其设置为永久，并且它将覆盖父节点的悬停选择器。因此子菜单不再显示。 这一定很常见，但我找不到任何答案

非常感谢任何帮助

html:

js:

这是您可以尝试的方法

<ul class="level1">
    <li>one
        <ul class="level2">
            <li id="test">two</li>
            <li>three</li>
        </ul>
    </li>
</ul>

.level1 li:hover > ul {
    display: inline;
}

.level2 {
    display: none;
}

document
  .getElementById('test')
  .addEventListener('click',function () {
     this.parentNode.style.display = 'none';
     // After this the menu doesn't open anymore
     // because the style is overriden
});

<ul class="level1">
    <li class="hoverMe">one
        <ul class="level2">
            <li id="test">two</li>
            <li>three</li>
        </ul>
    </li>
</ul>

.hoverMe:hover > ul {
    display: inline;
}

var test = document.getElementById('test');
test.onclick =  function () {
    this.parentNode.parentNode.className = "";
};

var level1 = document.getElementsByClassName('level1')[0];
level1.getElementsByTagName("li")[0].onmouseover =  function () {
    if (this.className != "hoverMe") {
        this.className = "hoverMe";
    }
};