原生 popover 不支持多层级嵌套菜单，规范明确禁止，子 popover 元素会被浏览器静默忽略；真要实现多级菜单，应使用单个 popover="manual" 容器配合 CSS/JS 控制显隐与键盘导航。
原生 popover 不支持多层级嵌套菜单——浏览器会直接忽略子 popover 元素，这不是 bug，是规范禁止的。
popover 嵌套会被浏览器静默丢弃
如果你写成这样：
<div popover="auto" id="menu-1">
<button>一级</button>
<div popover="auto" id="submenu-2">← 这个不会被识别为 popover
<button>二级</button>
</div>
</div>
第二层 popover 属性会被完全忽略。浏览器只认顶层带 popover 的元素，子元素上的该属性无效，也不触发任何错误提示，就是“看不见”。
- 规范明确禁止嵌套：多个 popover 同时激活是 LIFO 栈式管理，不是树形结构
- 想靠
popovertarget指向子元素？不行——目标元素必须是文档级独立节点，不能是另一个 popover 的后代 - 即使强行用 JS 调用
showPopover()，也会抛DOMException: Cannot show a hidden popover，因为父 popover 隐藏时，子元素实际已脱离可交互状态
真要多级菜单，得用单个 popover 容器 + 手动 DOM 结构
正确做法是：只设一个 popover="manual" 容器，所有菜单层级都写在里面，用 CSS 和 JS 控制显隐逻辑。
立即学习“前端免费学习笔记（深入）”；
- 容器本身不嵌套 popover，只作为“弹出画布”，例如：
<div id="nav-popover" popover="manual"></div> - 菜单结构用语义化
<ul role="menu">嵌套，但所有<ul>都是平级 DOM 子节点，靠display: none/visibility: hidden控制展开状态 - 用
aria-expanded和aria-haspopup="menu"标记可展开项，键盘导航（ArrowDown/Escape）由 JS 监听处理 - 定位靠
position: absolute+ JS 计算（或用 floating-ui），别指望原生 popover 自动对齐子菜单右边缘
为什么不能用 popover="auto" 做多级
popover="auto" 是纯 click/toggle 模式，没有中间态、不暴露生命周期钩子，也没办法拦截“点击二级项时关闭一级并展开三级”这类逻辑。
- 它只响应一次 click：显示 → 再次 click 或 click 外部 → 隐藏，无法暂停、无法嵌套切换
- 按 Escape 不关闭（Chrome 125 仍无支持），键盘用户无法操作二级菜单
- 无法监听子菜单 hover 或 focus，
:hover在 popover 内部生效，但和外部按钮解耦，没法联动父级aria-expanded状态 - 移动端 Safari 对
popover="auto"支持极不稳定，点一下没反应、点两下穿透、长按触发异常都是常态
轻量替代方案其实更可控
与其硬套 popover 做多级，不如用 20 行 JS + position: absolute 实现一个“伪 popover”容器：
- 按钮点击时，动态计算其
getBoundingClientRect()，把菜单div插入document.body并定位到下方/右方 - 菜单内所有
<ul>用transform: translateX(100%)实现右向展开，避免left: 100%因父级position缺失而错位 - 用
pointer-events: none+opacity过渡控制显隐，比display: none更利于动画和无障碍 - 关键细节：菜单容器加
role="menu"，每个项加role="menuitem"，展开项同步更新aria-expanded和aria-controls
这个方案不依赖 popover API，兼容性拉满，样式完全自由，箭头、阴影、z-index、跟随滚动都能自己控——所谓“轻量”，不是代码行数少，而是行为边界清晰、出问题能快速定位。
