如何实现悬停显示子菜单且悬停子项时子菜单保持展开

问题原因 #

• HTML结构不规范：Link3对应的子菜单未嵌套在所属的<li>标签内，无法通过父级元素的悬停状态控制显示
• 父菜单项与子菜单存在触发间隙：子菜单设置的margin: 39px 0 0 0如果大于父菜单项的高度，鼠标从父项移到子菜单的过程中会离开悬停触发区域，导致子菜单收起
• 缺少基础的显隐控制规则：当前CSS未定义子菜单默认隐藏、父元素悬停时显示的逻辑，若用JS触发未绑定到父li整体，就会出现移到子菜单就失效的问题

修复方案 #

优先用纯CSS实现，无需JS即可解决悬停失效问题，修改后的代码如下：

修正后HTML #

<header>
  <div class="container">
    <div class="links">
      <ul>
        <li><a href="">Link 1</a></li>
        <li class="dropdown">
          <a href="">Link 2</a>
          <ul class="submenu">
            <li><a href="">Link 2A</a></li>
            <li><a href="">Link 2B</a></li>
          </ul>
        </li>
        <!-- 修正Link3的子菜单嵌套结构，给li加dropdown类 -->
        <li class="dropdown">
          <a href="">Link 3</a>
          <ul class="submenu">
            <li><a href="">Link 3A</a></li>
            <li><a href="">Link 3B</a></li>
          </ul>
        </li>
        <li><a href="">Link 4</a></li>
      </ul>
    </div>
  </div>
</header>

修正后CSS #

header .container .links ul li.dropdown {
  position: relative;
}

header .container .links ul li.dropdown ul {
  position: absolute;
  /* 把margin改成top，消除间隙，若需要间距可以给父li加padding-bottom撑出区域 */
  top: 100%;
  left: 0;
  margin: 0;
  background: #fff;
  padding: 0;
  -webkit-box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  min-width: 240px;
  z-index: 500;
  /* 新增默认隐藏规则 */
  display: none;
}

/* 新增父li悬停时显示子菜单的规则 */
header .container .links ul li.dropdown:hover > ul {
  display: block;
}

header .container .links ul li.dropdown ul li {
  padding: 17px 20px;
}

header .container .links ul li.dropdown ul li a {
  font-family: Raleway;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

header .container .links ul li.dropdown ul li:hover a {
  color: #82945c;
  text-decoration: underline;
}

该方案用top:100%代替固定margin值，让子菜单紧贴父li的底部，完全消除鼠标移动的间隙，同时将悬停事件绑定到整个父li元素，子菜单作为li的子元素，鼠标移到子菜单时依然属于悬停在父li上，不会触发收起。

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