浏览器原生不支持右键子菜单，需用DOM+CSS+JS模拟：监听contextmenu、preventDefault、动态定位弹出div；子菜单通过hover/click触发嵌套元素显示，定位用pageX/Y并计算偏移；移动端需长按模拟；display:none优于visibility:hidden；z-index逐级递增；必须支持ArrowRight/Left、Escape及tabindex键盘导航。
右键菜单里加子菜单，浏览器原生不支持
HTML 标准的 contextmenu 事件本身不提供任何菜单渲染能力，更没有“子菜单”概念。所谓“右键菜单子菜单”，全是用 DOM + CSS + JS 模拟出来的。别指望靠 <menu> 或 <command>（已废弃）实现多级——它们在现代浏览器里基本没用。
用 event.preventDefault() 拦住默认右键，再手动定位弹出 DOM
核心逻辑就三步：监听 contextmenu、阻止默认行为、动态创建并定位一个 <div class="menu">。子菜单只是这个 <div> 里的嵌套 <ul> 或另一层 <div class="submenu">，靠 hover 或 click 触发显示。
关键点：
- 定位必须用
event.pageX/event.pageY，不是clientX/clientY（后者不包含滚动偏移） - 子菜单出现位置要计算父项 offsetTop/offsetLeft，并预留边距，否则可能贴边溢出视口
- 鼠标移出主菜单区域时，得用防抖清掉子菜单显示定时器，不然会闪退或残留
- 移动端没有右键，
contextmenu事件在 iOS Safari 上默认被禁用，需加touchstart+ 长按模拟
display: none 和 visibility: hidden 别混用
子菜单初始状态建议用 display: none，而不是 visibility: hidden。前者不占布局流、不影响父容器尺寸计算；后者仍参与布局，容易导致父菜单高度异常、定位偏移。CSS 中对子菜单的显隐控制应只通过 JS 切换 class，例如：
立即学习“前端免费学习笔记（深入）”；
.submenu { display: none; }
.show { display: block; }
同时注意 z-index 层级：主菜单、子菜单、子子菜单要逐级 +1，否则下拉时会被上层遮住。
键盘操作支持不能漏——尤其是 ArrowRight 和 Escape
纯鼠标操作的右键菜单在无障碍和快捷键场景下几乎不可用。真实项目里至少得补上：
- 焦点进入主菜单后，
ArrowRight键展开当前项的子菜单 -
ArrowLeft键收起当前子菜单并返回上级 -
Escape键逐级关闭所有打开的子菜单，最后隐藏整个菜单 - 每个菜单项加
tabindex="0"，确保可聚焦
这些逻辑不难写，但漏掉一个就会让键盘用户卡死在某一级子菜单里——这是上线后最容易被忽略的兼容性硬伤。
