如何实现导航菜单下拉子菜单始终居中对齐主菜单？

问题根源 #

你使用left: -32%这类固定百分比实现子菜单居中，本质是依赖主菜单项与子菜单的宽度比例。但不同主菜单项的文字长度差异较大（比如"Milestone Consulting"远宽于"Rólunk"），固定百分比无法适配所有情况，导致仅部分菜单能对齐。

解决方案 #

改用动态居中的CSS方案，无需依赖固定百分比，可适配任意宽度的主菜单与子菜单：

修改核心CSS代码 #

替换.dropdown-lvl-1的定位逻辑，同时修复子菜单的显示控制：

/* 替换原有.dropdown-lvl-1的定位代码 */
.dropdown-lvl-1 {
  list-style: none;
  position: absolute;
  visibility: hidden;
  margin-top: 0px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* 修复子菜单显示逻辑 */
.mst-nav-menu li:hover .dropdown-lvl-1 {
  visibility: visible;
}

原理说明 #

• left: 50%：将子菜单的左边缘对齐主菜单的水平中心点
• transform: translateX(-50%)：将子菜单向左偏移自身宽度的50%，实现子菜单中心与主菜单中心完全重合
• 该方案为响应式居中，不受主/子菜单宽度变化影响，能确保所有子菜单始终对齐对应主菜单项

内容的提问来源于stack exchange，提问作者Márton Stark