如何实现hover主菜单时触发的dropdown下拉菜单居中显示在主菜单项下方

问题原因 #

你当前为下拉菜单设置了固定的left: -78px偏移量，由于不同主菜单项的自身宽度不同，固定偏移无法适配所有菜单项，才会出现下拉菜单对齐效果不一致的问题。

解决方案 #

修改.dropdown-down的定位规则即可实现所有下拉菜单自动居中对齐在对应主菜单项正下方，修改后的CSS代码如下：

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down {
  width: 250px;
  background-color: #009297;
  display: none;
  position: absolute;
  /* 替换原有固定left值为以下两行实现水平居中 */
  left: 50%;
  transform: translateX(-50%);
  /* 确保下拉菜单紧贴主菜单项底部显示 */
  top: 100%;
  -webkit-box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
  box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
}

实现原理 #

父级主菜单项已经设置了position: relative作为定位参考：

1. left: 50%会让下拉菜单的左边缘对齐父菜单项的水平中点
2. transform: translateX(-50%)会将下拉菜单向左平移自身宽度的一半，最终实现下拉菜单的中点和父菜单项的中点完全重合，不管主菜单项宽度是多少都能自动居中对齐。

如果需要兼容不支持CSS transform的极旧浏览器，也可以将transform: translateX(-50%)替换为margin-left: -125px（125px是你当前设置的下拉菜单宽度250px的一半），不过transform方案灵活性更高，后续修改下拉菜单宽度不需要同步调整偏移值。

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