通过CSS绝对定位将子菜单设置为相对于主菜单右对齐，利用 position: relative 和 left: 100% 实现无缝右向展开，避免遮挡或错位。
通过css绝对定位将子菜单设置为相对于主菜单右对齐，利用 `position: relative` 和 `left: 100%` 实现无缝右向展开，避免遮挡或错位。
要让子菜单（SubMenu）精确显示在主菜单（MenuItem）的右侧而非默认的左侧或下方，关键在于建立正确的定位上下文并控制子元素的偏移方向。默认情况下，若未显式设置定位属性，absolute 定位元素会相对于最近的已定位祖先（即 position 为 relative、absolute 或 fixed 的父级）进行定位。
以下是一个可直接运行的完整示例：
<style>
/* 主菜单容器需设为相对定位，作为子菜单的定位参考 */
MenuItem {
background-color: #cccccc;
position: relative;
display: inline-block;
padding: 5px;
margin: 0 10px;
}
/* 子菜单使用绝对定位，left: 100% 表示紧贴主菜单右边缘开始 */
SubMenu {
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
background-color: dodgerblue;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
min-width: 160px;
}
SubMenu a {
display: block;
padding: 8px 12px;
color: white;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
SubMenu a:hover {
background-color: #1e90ff;
}
</style>
<MenuItem title="Main">
<div class="title">Main</div>
<SubMenu>
<a href="/Name">Name Details</a>
<a href="/Details">Cust Details</a>
</SubMenu>
</MenuItem>✅ 核心要点说明：
- MenuItem 必须声明 position: relative，否则 SubMenu 的 left: 100% 将向上回溯到 <body> 或其他定位祖先，导致定位失效；
- left: 100% 表示子菜单左边界与主菜单右边界对齐，实现“紧贴右侧”效果；
- top: 0 确保垂直方向对齐起始位置（如需微调，可设为 top: 4px 避开边框间隙）；
- white-space: nowrap 防止长文本换行破坏水平布局；
- 建议为 <MenuItem> 内部显式包裹标题（如 <div class="title">Main</div>），避免 title 属性被忽略或语义不明确。
⚠️ 注意事项：
- 若实际项目中使用的是 React 组件库（如 Ant Design、Mantine），请优先查阅其官方文档中 Menu / Dropdown 的 placement 或 trigger 配置项，而非手动覆盖 CSS；
- 在响应式场景下，右侧展开可能在窄屏中溢出视口，建议结合 right: 100% 回退策略或 JavaScript 动态检测并切换方向；
- 确保 MenuItem 和 SubMenu 是合法的自定义元素（需注册 customElements.define()）或替换为标准语义化标签（如 <nav> + <ul> 结构），以保障可访问性与兼容性。
通过以上结构与样式组合，即可稳定、可维护地实现子菜单右向展开效果。
