Bootstrap 4搭建三级下拉菜单时末级菜单位置错位如何解决

问题根因 #

三级菜单显示位置偏移是两个核心问题导致的：

• 承载三级菜单的二级菜单项<li>没有添加dropdown-submenu类，你编写的三级菜单定位CSS规则完全没有命中目标元素
• 三级菜单的定位父级没有设置position: relative，导致left:100%的偏移是相对于上层其他定位元素计算，无法对齐当前对应的二级菜单项

修复方法 #

1. 调整HTML结构 #

给包含三级下拉菜单的二级<li>节点补上dropdown-submenu类，同时修复原代码中a标签href属性和data-toggle属性之间缺失的空格（避免属性解析异常），对应代码片段修改如下：

<li class="nav-item dropdown">
  <a href="https://fotografika.hu/kategoria/14/ajandektargy-nyomtatas" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" title="Ajándéktárgy nyomtatás">Menu 1</a>
  <ul class="dropdown-menu">
    <!-- 给承载三级菜单的二级li添加dropdown-submenu类 -->
    <li class="dropdown-submenu">
      <a class="dropdown-item" href="https://fotografika.hu/kategoria/15/ajandektargy-nyomtatas/bogre-nyomtatas" title="Bögre nyomtatás">Menu 2</a> 
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a></li>
        <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a></li>
        <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a></li>
        <li><a class="dropdown-item" href="https://szakkereskedo.hu/kategoria/137/betonadalekszerek/folyositok" title="Folyósítók">Menu 3</a></li>
      </ul>
    </li>
    <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/16/ajandektargy-nyomtatas/polo-nyomtatas" title="Póló nyomtatás">Póló nyomtatás</a></li>
    <li><a class="dropdown-item" href="https://fotografika.hu/kategoria/17/ajandektargy-nyomtatas/baba-ruha-nyomtatas" title="Baba ruha nyomtatás">Baba ruha nyomtatás</a></li>
  </ul>
</li> 

2. 替换原有CSS样式 #

把之前写的三级菜单CSS替换为以下代码，补全相对定位规则、修正箭头对齐问题：

/* 二级菜单容器设置相对定位，作为三级菜单的定位基准 */
.dropdown-submenu {
  position: relative;
}
/* 三级菜单定位到二级菜单项右侧，-1px margin消除边框错位 */
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
/* 二级菜单项右侧指示箭头垂直居中 */
.dropdown-submenu > .dropdown-item::after {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
/* 如需悬停直接展开三级菜单可保留以下规则，点击触发可删除 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

效果说明 #

修改完成后，三级下拉菜单会精准对齐到对应二级菜单项的右侧边缘，不会再出现位置偏移，二级菜单项的指示箭头也会保持垂直居中。

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