悬停触发横向下拉菜单异常修复方案及jQuery使用必要性咨询

问题说明 #

制作hover触发展开的横向菜单时，出现功能异常：鼠标从菜单项“item2_item”的边界移开时，下拉菜单无法立即消失。

问题根源 #

原代码存在几个关键问题：

• 全局设置li { position: absolute; }，导致所有列表项脱离文档流，父菜单项的hover区域被破坏，鼠标移开时无法正确触发hover状态移除
• 部分元素设置z-index:-1，导致元素被遮挡，hover事件无法正常响应
• CSS选择器优先级冲突，部分样式覆盖了父元素的hover触发范围

最优修复方案 #

核心修改点 #

1. 移除全局的li { position: absolute; }，仅给需要作为容器的父菜单项设置position: relative，保证子菜单能基于父元素定位
2. 删除无效的z-index:-1设置，避免元素被遮挡
3. 调整子菜单的显示逻辑，确保父元素的hover区域包含子菜单的触发路径
4. 修正CSS选择器，避免样式冲突

修正后的完整代码 #

HTML部分

<nav>
  <ul id='menu'>
    <li id='1' attr='end' href=2 depth='1' class='parent'>
      <span style='color:yellow'>item 1</span>
      <ul id='1'></ul>
    </li>
    <li id='2' attr='' depth='1' class='parent'>item 2
      <ul id='2'>
        <li id='2_1' attr='' depth='2' class='parent'>item2item1
          <ul id='21'>
            <li id='2_2' attr='end' depth='3' class='parent'>item2_1item
            </li>
          </ul>
        </li>
        <li id='22' attr='end' depth='2'>item2item2</li>
      </ul>
  </ul>
</nav>

CSS部分

nav ul#menu {
  background-color: #0073BE;
}

nav ul {
  list-style: none;
  padding: 0;
  min-width: 10em;
}

nav .parent li:hover {
  background-color: orange;
}

nav {
  margin: 0 auto;
}

nav ul#menu {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 8px 4px;
}

nav .parent {
  position: relative;
  line-height: 30px;
  font-size: 150%;
  color: yellow;
  cursor: pointer;
  margin: 10px 5px;
  padding: 3px 5px;
}

nav .parent ul li {
  background-color: darkorange;
  line-height: 120%;
  padding: 8px 5px;
  margin: 3px;
  border-radius: 23px;
  white-space: nowrap;
}

ul > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}

ul > li:hover > ul {
  display: block;
}

/* 三级菜单定位 */
ul > li > ul > li > ul {
  left: 100%;
  top: 0;
}

是否需要使用jQuery实现？ #

完全没必要。原生CSS的:hover伪类已经能完美实现基础的hover展开/收起菜单功能，代码更轻量、加载更快，无需引入额外JS库。只有当你需要实现更复杂的交互（比如延迟显示/隐藏菜单、添加过渡动画、移动端触屏适配等）时，才需要考虑用JS（包括jQuery）增强功能。

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