如何使导航栏中的Mega Menu下拉框相对于触发按钮居中显示

我明白你的问题啦——现在你的mega菜单下拉框是整个页面居中，而不是对着触发它的那个按钮居中，之前改样式还不小心把下拉框弄到导航栏里面，确实挺闹心的。别担心，咱们只需要调整一下定位的基准和规则就能搞定！

问题根源 #

原来的.dropdown-content是绝对定位，但它的父容器.dropdown没设置position: relative，导致下拉框只能以页面或者更上层的元素为定位基准，自然就会页面居中；而且导航栏的overflow: hidden还会把错误定位的下拉框裁剪到内部。

解决方案步骤 #

1. 给下拉按钮容器添加定位基准

找到.dropdown的CSS代码，加上position: relative，让下拉框以这个按钮容器为定位参考：

.dropdown {
    float: left;
    overflow: hidden;
    position: relative; /* 新增：设置定位基准 */
}

2. 调整下拉框的定位规则

修改.dropdown-content的样式，让它相对于按钮容器居中，同时刚好显示在按钮下方：

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 60%; /* 可根据需求调整宽度，比如改成固定值400px */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
    top: 100%; /* 让下拉框紧贴按钮底部 */
    left: 50%; /* 下拉框左边缘对齐容器中点 */
    transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现完美居中 */
}

3. 移除冲突的全局居中样式

把之前那段让下拉框页面居中的代码删掉，避免和新的定位规则冲突：

/* 删除这段代码 */
.navbar .dropdown>.dropdown-content {
    left: 50%;
    transform: translate3d(-50%, 10px, 0);
}

效果验证 #

做完这几步后，你鼠标悬停在任意一个下拉按钮上，mega菜单就会精准地对着这个按钮居中显示，而且不会被导航栏的样式影响跑到内部去啦。如果觉得下拉框宽度不合适，直接调整.dropdown-content的width属性就行，完全不影响居中效果。

备注：内容来源于stack exchange，提问作者Dion Fitzgerald