menu 标签的 type 属性在所有主流浏览器中均未实现，type="context"、"toolbar"、"list" 均被忽略，仅作普通块级元素渲染；其语义功能完全缺失，需用标准标签+ARIA+JS替代。
menu 标签的 type 属性在规范里写得清楚，但实际不能用——所有主流浏览器（Chrome、Firefox、Safari、Edge）均不实现其语义行为，type="context"、type="toolbar"、type="list" 全部被忽略，只当普通块级元素渲染。
为什么 type 属性在浏览器里完全没反应
不是你写错了，是浏览器根本没解析它。HTML 解析器会识别 <menu> 标签并创建 DOM 节点，但对 type 属性值不做任何特殊处理：既不触发上下文菜单弹出，也不自动管理工具栏焦点或键盘导航，更不区分命令列表层级。
-
type="context"需要配合contextmenu属性才能激活，但除旧版 Firefox 外，所有现代浏览器已移除对该组合的支持 -
menuitem元素早在 2016 年就被 Chrome/Firefox 移除，DOM 中压根不会生成该节点，所以<menu type="context"><menuitem>...这种写法连结构都构不成 -
type="toolbar"不提供按钮分组、tab 键顺序、aria-orientation或焦点环控制，CSSdisplay: flex效果和手写<div>完全一样
type="toolbar" 看似能用，实则毫无价值
有人把 <menu type="toolbar"> 当作语义化工具栏捷径，结果发现按钮垂直堆叠、无法键盘操作、无障碍属性缺失、屏幕阅读器完全无视——它比 <nav role="toolbar"> 少了至少 5 个关键可访问性保障。
- 没有内置的
role="toolbar"或aria-orientation，需手动补全 - 无焦点管理逻辑：按 Tab 不会按按钮顺序跳转，Shift+Tab 也不反向遍历
- 无
aria-expanded、aria-haspopup支持，下拉式工具栏完全不可控 - CSS 重置成本高：默认 margin/padding/line-height 各浏览器不一致，且无法通过
type做条件样式（如menu[type="toolbar"]选择器虽能生效，但语义零增益）
type="context" 的真实替代方案只有 JS
指望 <menu type="context"> 实现右键菜单？放弃吧。真正可用的路径只有一条：监听 contextmenu 事件，调用 e.preventDefault()，再动态插入带 role="menu" 的 <div>。
- 必须用
e.preventDefault()，否则系统原生菜单会覆盖你的自定义菜单 - 定位要用
e.clientX/e.clientY+position: fixed，避免滚动时错位 - 关闭逻辑不能只靠点击菜单项：需监听
document.click或blur，否则菜单悬停不消失 - 无障碍必须手动加：
role="menu"、每个选项role="menuitem"、键盘方向键支持、Enter/Space触发、Escape关闭
别被 HTML5 规范里的“重定义”误导——menu 的 type 属性是已废弃的遗留设计，2026 年仍写它，等于主动放弃兼容性与可访问性。真正要做的，是用标准语义标签（nav、section、button）+ ARIA + JS 补足行为，而不是寄希望于一个被所有引擎忽略的属性。
