如何让自定义Angular嵌套菜单的子菜单与上级选项对齐？

我创建了一个示例来展示我的多级嵌套菜单问题：当鼠标悬停“Option 3”时，子菜单可正常显示但位置错误。需要让子菜单与上一级选中的选项对齐，预期效果为：当鼠标悬停“Option 3”时，右侧弹出的子菜单顶部与“Option 3”的顶部完全对齐，子菜单的左侧边缘紧贴“Option 3”的右侧边缘，菜单层级清晰对齐。

解决方法 #

要实现子菜单与父级选项精准对齐，只需调整CSS定位规则即可：

• 给父级菜单项设置相对定位
  给包含子菜单的父级菜单项（对应“Option 3”的<li>元素）添加相对定位，让子菜单的定位以父级为基准：

  .menu-item.has-submenu {
    position: relative;
  }
  

• 设置子菜单的绝对定位参数
  将子菜单设置为绝对定位，通过left: 100%让子菜单紧贴父级右侧，top: 0让子菜单顶部与父级顶部对齐，同时重置默认边距避免偏移：

  .submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    /* 补充其他样式：如背景色、边框、列表样式重置等 */
  }
  

• 排查布局干扰项
  确保父级菜单项没有设置overflow: hidden（否则子菜单会被截断），同时检查是否有默认的内边距、外边距导致偏移，按需重置即可。

调整后，子菜单就能按照预期和父级选项对齐了。

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