导航下拉菜单调试：将Select Program Year改为hover触发显示

顶部导航包含两个下拉菜单：「Select SFA」可正常通过hover触发显示，但「Select Program Year」在页面加载时默认显示，需要调整为与前者一致的hover触发逻辑，已为两个菜单设置属性相同的CSS选择器，但问题仍未解决。

核心问题排查 #

1. 「dropdown-menu-year」未默认隐藏
   对比.dropdown-menu的CSS规则，它通过display: none;实现初始隐藏，但.dropdown-menu-year缺少这个关键属性，导致页面加载时直接显示。

2. 存在冗余无效的CSS选择器
   代码中包含nav-container-year:hover .dropdown-menu这个错误选择器，它指向的是另一个下拉菜单的类名，属于无效代码（虽不直接影响当前问题，但需清理）。

修复方案 #

1. 给「dropdown-menu-year」添加初始隐藏属性 #

在.dropdown-menu-year的CSS规则中添加display: none;，让菜单默认隐藏：

.dropdown-menu-year {
  display: none; /* 新增：默认隐藏下拉菜单 */
  position: absolute;
  right: -10px;
  opacity: 1;
  transition: opacity 0.5s ease;
  width: 160px;
  height: 150px;
  /* 其余原有属性保持不变 */
}

2. 移除冗余无效的选择器 #

删除以下无用代码：

.nav-container-year:hover .dropdown-menu {
  display: block; 
}

修改完成后，两个下拉菜单都会默认隐藏，仅在鼠标悬停对应触发按钮的父元素.nav-item-dropdown时才显示，触发逻辑完全一致。

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