为何下拉菜单锚点无法导航？focus联动pointer-events规则失效

问题背景 #

开发语言切换下拉菜单时，已配置CSS交互规则：当#lang-dropdown-button处于:focus状态时，为同级#router-list元素设置pointer-events: all属性，保证展开的下拉菜单可正常交互。但实际运行时规则未达到预期效果，点击下拉内指向德语页面的锚点链接时，无法触发正常页面导航跳转。

核心问题成因 #

• 交互状态保持逻辑存在缺陷：原有方案依赖按钮单独的:focus伪类触发菜单展开。当用户点击下拉菜单内的锚点链接时，焦点会在点击瞬间从按钮转移到链接元素上，导致按钮的:focus状态被移除，#router-list的样式会立即回退到pointer-events: none、opacity: 0的默认隐藏状态。此时点击动作还未完成导航流程，就被拦截在不可交互状态下，完全无法触发链接跳转。
• 元素盒模型存在隐性交互缺陷：#router-list设置了position: relative定位，但内部的ul元素使用position: absolute脱离文档流，导致父元素#router-list没有被内容撑开，实际渲染高度为0。即便父元素被正确设置为pointer-events: all，自身也没有可交互的有效渲染区域；加上pointer-events是可继承属性，绝对定位的子元素ul也会受父元素状态影响，无法稳定接收点击事件。

修复方案 #

• 替换状态触发逻辑：将原有依赖按钮单独:focus的选择器，替换为:focus-within伪类实现的容器级状态判断。把原规则#lang-dropdown-button:focus + #router-list修改为#lang-dropdown:focus-within #router-list。该选择器的逻辑是：只要#lang-dropdown容器内部的任意元素（包括触发按钮、下拉内的链接）获得焦点，就始终保持菜单展开、可交互的状态，不会因为点击链接导致焦点转移就立即收起菜单。
• 补全交互有效区域：给#router-list补上与内部下拉菜单一致的固定高度（如示例中下拉菜单的实际高度35px），或调整ul的定位方式让父元素能被内容撑开，避免父元素高度为0导致的交互区域缺失。
• 兼容性兜底：如果需要兼容不支持:focus-within的老旧浏览器，可以补充少量JS逻辑，给按钮添加点击事件，在#lang-dropdown容器上切换自定义的active类，通过类选择器控制菜单的展开、收起状态，彻底规避纯CSS方案的状态丢失问题。

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