Bulma框架下如何实现导航栏mega menu在对应导航项正下方居中

问题根源 #

当前的定位偏差来自两处逻辑冲突：

• 给.navbar-item.is-mega设置的position: static，会让内部绝对定位的.navbar-dropdown找不到就近的定位参考元素，最终参照最外层导航栏容器做左对齐摆放
• 没有给下拉菜单设置水平居中的偏移规则，哪怕给下拉设置了min-width: 50%，它也是从参考元素的左边缘开始铺开，自然无法做到和Blog导航项的中心对齐

具体修改方案 #

1. 调整CSS定位规则 #

替换现有mega menu相关CSS为如下内容：

.navbar-item.is-mega {
  /* 将原有static改为relative，让下拉菜单以当前导航项为定位参考 */
  position: relative;

  .is-mega-menu-title {
    margin-bottom: 0;
    padding: .375rem 1rem;
  }

  .navbar-dropdown#blogDropdown {
    /* 将原内联样式的min-width移到此处维护，避免优先级冲突 */
    min-width: 50vw;
    /* 核心居中定位逻辑：让下拉中心和导航项中心完全重合 */
    left: 50%;
    transform: translateX(-50%);
    /* 避免下拉超出视口边界 */
    max-width: calc(100vw - 2rem);
    /* 固定下拉顶部位置，和导航栏保持默认间距 */
    top: 100%;
  }
}

这里的min-width: 50vw可以根据实际布局需求调整，比如改成固定像素宽度，只要保留定位规则，就能始终保持下拉和触发导航项的居中对齐

2. 清理HTML内的冗余样式 #

找到下拉菜单的标签，删除原先写在标签上的内联样式style="min-width: 50%"，同时可以把无实际作用的data-style="width: 18rem;"属性一并删掉，避免干扰样式计算。

效果说明 #

修改完成后，展开Blog的悬停下拉菜单，三列布局里居中位置的Sub Menu Title会正好落在Blog导航项的正下方，不会出现之前偏左的错位问题。

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