纯CSS交互式垂直下拉导航栏Hover异常问题修复求助

问题描述 #

开发纯CSS交互式垂直下拉导航栏时出现Hover Bug：

• 首次hover任意main-categories项，黑底白字的Hover样式可正常触发；
• 向下hover后续main-categories项时，该Hover样式失效，但向上hover操作正常。
  例如先hover Politics样式显示正常，再hover Economy或Education时样式无法触发。

问题原因 #

问题根源在于main-categories元素设置的overflow: hidden属性：
当hover上方的main-categories时，其内部的sub-categories展开，会使该main-categories的高度自动扩展，下方的main-categories会被向下挤压偏移。此时鼠标移动到原下方main-categories的位置时，实际Hover的仍是上方已展开的main-categories元素（因高度已延伸覆盖该区域），导致下方main-categories的Hover事件无法被触发。

修复步骤 #

移除main-categories中的overflow: hidden属性，修改后的CSS代码片段如下：

main-categories {
  display: block;
  position: relative;
  width: 92%;
  margin: 0 auto;
  height: auto;
  text-align: left;
  /* 移除原有的overflow: hidden */
}

若需保留溢出控制逻辑，可将overflow: hidden替换为overflow: visible，但此处sub-categories为正常展开的下拉内容，无需隐藏溢出，直接移除该属性即可解决问题。

效果验证 #

修改后，从上到下hover所有main-categories项时，每个项都能正确触发黑底白字的Hover样式，移动端触摸交互也恢复正常。

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