响应式导航菜单Bug：小屏Mega Menu触发后致按钮错位

核心问题是你的Mega Menu没有脱离文档流，hover展开时会占用页面空间，导致挤压其他导航按钮。按以下步骤调整：

• 给「Directorates」按钮的父容器（比如带.nav-item类的元素）设置position: relative，作为Mega Menu绝对定位的参考基准
• 给Mega Menu容器添加position: absolute，同时设置top: 100%; left: 0;，让它紧贴导航栏下方，完全脱离文档流，不会影响其他元素的布局
• 给Mega Menu设置z-index: 999（或更高值），避免被页面其他元素遮挡
• 如果你用了flex/grid做Mega Menu的列布局，确保容器宽度是固定值或者自适应父容器，不要让它的宽度影响导航栏的整体布局

示例代码参考：

/* 导航项父容器 */
.nav-item.directorates {
  position: relative;
}

/* Mega Menu 默认隐藏 */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 800px; /* 按需调整宽度 */
  z-index: 999;
  /* 列布局样式示例 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* hover时显示Mega Menu */
.nav-item.directorates:hover .mega-menu {
  display: grid;
}

额外排查点：

• 检查响应式媒体查询中，有没有给Mega Menu或其父容器设置margin/padding导致的额外空间
• 确认父容器没有设置overflow: hidden，否则会截断Mega Menu，需要移除该属性
• 对比其他正常按钮的样式，看「Directorates」按钮是否有额外的display/float属性差异，针对性调整

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