纯CSS实现的下拉菜单点击内部链接后如何自动关闭？

可以通过纯CSS方案解决这个问题，你之前的尝试失效是因为.subMenu:active的优先级低于父元素:hover触发的显示规则，且:active伪类仅在鼠标按下的短暂时间内生效，无法持续到页面跳转完成。

方案1：兼容现代浏览器的最优方案（推荐） #

使用CSS :has 伪类（Chrome 105+、Firefox 121+、Safari 15.4+均支持），直接监听子菜单内链接的点击状态，触发菜单隐藏：

.subMenu{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 140px;  
    transition: all 0.3s ease;
    z-index: 1000;
}
.hasSubmenu:hover .subMenu {
    opacity: 1;
    visibility: visible;
    top: 80px;
}
/* 新增规则：子菜单内链接被点击时隐藏菜单 */
.hasSubmenu:has(.subMenu a:active) .subMenu {
    opacity: 0;
    visibility: hidden;
    top: 140px;
    /* 缩短过渡时长，让隐藏更跟手 */
    transition: all 0.1s ease;
}

方案2：兼容旧浏览器的 fallback 方案 #

如果需要兼容不支持:has的旧版本浏览器，可以利用:active的冒泡特性，给父菜单添加点击隐藏规则：

/* 新增规则：父菜单被点击时隐藏子菜单 */
.hasSubmenu:active .subMenu {
    opacity: 0;
    visibility: hidden;
    top: 140px;
    transition: all 0.1s ease;
}

方案说明 #

以上两种方案都能实现点击子菜单链接跳转后自动关闭菜单的效果，纯CSS实现无需修改JS逻辑。唯一的局限性是如果跳转完成后用户鼠标仍然持续停留在父菜单区域，菜单会再次展开，这是hover触发菜单的原生特性，若要彻底规避该场景可以配合少量React路由监听逻辑实现。

问题界面参考 #

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