导航下拉菜单hover显示后无法正常隐藏的技术问题咨询

问题说明 #

我做带子分类的导航栏，想实现鼠标hover主分类时显示对应子分类。现在hover显示没问题，但子分类移开后不会自动消失；试了mouseout事件隐藏，结果导航栏消失得太快。另外测试click事件时，只有id为Hauptnavi的元素能生效，Servicehover元素完全没反应。求正确的实现思路，不用给完整代码。

核心思路建议 #

• 先修正HTML结构：现在子菜单<ul id="Unternavi">是Hauptnavi的直接子元素，不属于Servicehover的<li>，层级关系错了。得把Unternavi嵌套到Servicehover的<li>里面，这样主分类和子菜单的归属关系清晰，不管是用CSS还是JS控制都更准确。
• 优先用纯CSS实现hover逻辑：CSS的:hover伪类就能搞定基础的显示隐藏，不用写JS，还能避免mouseover/mouseout的事件冒泡坑。给Servicehover加:hover状态，控制它里面的Unternavi显示（比如用visibility: visible/hidden，配合transition加个过渡动画，就能解决消失太快的问题）。
• 如果必须用JS优化体验：
  • 别用mouseover/mouseout，换成mouseenter/mouseleave，这俩不会冒泡，鼠标经过子元素时不会触发父元素的离开事件，能避免子菜单刚移上去就消失的问题。
  • 可以给主分类和子菜单的组合区域绑定事件：鼠标进入主分类或子菜单时保持显示，鼠标完全离开这个区域再隐藏。还能加个定时器（比如setTimeout），延迟几百毫秒再隐藏，防止快速移开误触发。
• click事件无效的排查方向：检查Servicehover是不是被其他元素挡住了，或者JS代码是不是在DOM还没加载完就执行了（可以把JS代码放到DOMContentLoaded事件里，确保元素存在后再绑定事件）。

测试代码 #

CSS #

* {
    padding: 0;
    margin: 0;
}

#Hauptnavi {
    background-color: gray
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

#Unternavi {
    opacity: 0;
    visibility: hidden; /* 这里注意visibility的有效值是hidden/visible，不是none */
}

HTML & JS #

<body>
<nav role="Navigation">
    <ul id="Hauptnavi">
        <li><a href="#">Start</a></li>
        <li id="Servicehover"><a href="#">Service</a></li>
            <ul id="Unternavi">
                <li><a href="#">Unterseite A</a></li>
                <li><a href="#">Unterseite B</a></li>
                <li><a href="#">Unterseite C</a></li>
            </ul>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<script>
document.getElementById("Servicehover").addEventListener("mouseover", MouseOver);
/* document.getElementById("Hauptnavi").addEventListener("mouseout", MouseOut); */

function MouseOver() {
    document.getElementById("Unternavi").style.visibility = "visible";
    document.getElementById("Unternavi").style.opacity = 1;
}

/*
function MouseOut() {
    document.getElementById("Unternavi").style.visibility = "hidden"; // 修正为hidden
    document.getElementById("Unternavi").style.opacity = 0;
} */
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Nico Milano