网站导航箭头hover状态问题：移入下拉子菜单后复位如何解决？

问题根源：当前仅给导航标题（.header-nav-folder-title）绑定hover事件，鼠标移至下拉菜单区域时，标题失去hover状态，箭头随即复位。

解决思路：将hover事件绑定到包含标题和下拉菜单的父容器，只要鼠标处于整个菜单区域内，父容器就维持hover状态，箭头保持旋转效果。

修改后的CSS代码：

/* 箭头初始样式，统一设置过渡动画 */
.header-nav-folder-title:after {   
  content: '\F107'; 
  font-family: FontAwesome;
  display: inline-block;
  padding-left: 4px;
  padding-right: 6px;
  padding-top: 3px;
  transform: rotate(0deg);
  transition: transform 0.2s; /* 确保鼠标进出都有平滑过渡 */
}

/* 父容器hover时，触发箭头旋转 */
.header-nav-folder:hover .header-nav-folder-title:after {
  transform: rotate(180deg);
}

注意事项：

• 替换代码中的.header-nav-folder为你实际的导航菜单父容器类名，需确保该父容器同时包含.header-nav-folder-title和下拉菜单元素。
• 把过渡属性移到初始样式中，避免仅hover时有动画、复位时无动画的突兀效果。

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