你遇到的问题是鼠标从主下拉菜单移到子菜单时，主菜单会消失，甚至会触发下一个带下拉项的菜单显示，这确实是CSS的逻辑和定位设置出了问题，咱们一步步来修复：

先看核心问题所在 #

1. hover逻辑完全写反：你当前CSS里写了.gva-navigation > ul > li:hover > ul { display: none; }——这意味着鼠标悬停主菜单项时，子菜单会被隐藏，完全搞反了需求！
2. 子菜单定位导致空隙：HTML里子菜单加了margin-top: -30px，这会让子菜单和主菜单项之间出现空白区域，鼠标移过去时会脱离主菜单项的hover范围，直接导致主菜单收起。
3. 子菜单项定位错误：.gva-navigation > ul > li > ul > li设置了position: absolute，会让所有子菜单项重叠在一起，既破坏布局，也会干扰浏览器的hover检测。
4. HTML存在未闭合标签：比如Departments下面的空<li>、Teaching & Performance里的Midway Approach项未闭合</li>，这些语法错误也会导致浏览器渲染异常。

修正后的CSS代码 #

/* 主菜单项：作为子菜单的定位容器，增加padding扩大hover范围 */
.gva-navigation > ul > li { 
  position: relative; 
  z-index: 100; 
  padding: 8px 12px;
} 

/* 二级子菜单：默认隐藏，紧贴主菜单项底部 */
.gva-navigation > ul > li > ul { 
  position: absolute; 
  top: 100%; 
  left: 0;
  display: none; 
  padding: 10px 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #eeeeee;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} 

/* 主菜单项hover时，显示对应子菜单 */
.gva-navigation > ul > li:hover > ul { 
  display: block; 
} 

/* 二级子菜单项：正常垂直排列，避免重叠 */
.gva-navigation > ul > li > ul > li { 
  position: relative; 
  display: block; 
  padding: 6px 18px;
  white-space: nowrap;
} 

/* 三级子菜单：定位在父菜单项右侧 */
.gva-navigation > ul > li > ul > li > ul { 
  position: absolute; 
  top: 0;
  left: 100%;
  display: none;
  background: #ffffff;
  border: 1px solid #eeeeee;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 二级子菜单项hover时，显示三级菜单 */
.gva-navigation > ul > li > ul > li:hover > ul {
  display: block;
}

关键修正点说明 #

• 把hover时子菜单的display:none改成display:block，彻底修正核心逻辑
• 去掉子菜单的margin-top: -30px，改用top:100%让子菜单紧贴主菜单项，消除hover空隙
• 子菜单项改为position:relative+display:block，让它们正常垂直排列，不再重叠
• 增加背景、边框和阴影，既提升视觉效果，也避免子菜单和页面其他元素的hover干扰
• 补充了三级子菜单的hover显示逻辑，适配你HTML里的三级菜单结构

额外HTML修正提醒 #

记得补全所有未闭合的<li>标签：

• 删除Departments下面的空<li>（无实际内容的标签会干扰布局）
• 给Teaching & Performance里的Midway Approach项补上</li>

这样修改后，鼠标从主菜单平滑移到子菜单时，主菜单会保持展开状态，也不会误触发下一个菜单的hover了。

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