纯CSS实现的下拉菜单仅在Edge浏览器运行异常，该如何修复

• 你的实现依赖.hide元素的:focus状态控制菜单显示，当.hide触发焦点时，你直接将其设置为display: none
• Microsoft Edge的焦点处理逻辑和其他浏览器存在差异：元素被设置为display: none后会立刻从渲染树中移除，同时自动丢失:focus状态
• 失去焦点后，所有依赖.hide:focus的样式规则全部失效，菜单#ddm就会变回隐藏状态，因此出现闪烁后消失的异常

核心逻辑是隐藏.hide元素时，不使用display: none，改用视觉隐藏但保留元素在渲染树中的方案，避免焦点丢失。修改后的代码如下：

CSS代码 #

.show {
    display: none;
}
 
.hide:focus + .show {
    display: block;
}
 
/* 替换原display:none的隐藏逻辑，改用视觉隐藏保留元素实体 */
.hide:focus {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}
 
#ddm {
    display: none;
}
 
.hide:focus ~ #ddm {
    display: block;
}

/* 可选优化：鼠标悬停或点击菜单区域时保持显示，避免点击菜单项时失焦关闭 */
#ddm:hover, #ddm:focus-within {
    display: block;
}

HTML代码 #

和原有代码保持一致即可，也可给两个a标签添加tabindex="0"属性，确保所有场景下都能正常触发焦点：

<body>
<a href="#" class="hide" tabindex="0">menu</a><a href="#" class="show" tabindex="0">menu</a>
 
<div id="ddm">items</div>
</body>

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