【问题标题】：How to stop drop down menu from dropping when hovering under the "parent link"?悬停在“父链接”下时如何停止下拉菜单？
【发布时间】：2021-09-08 12:24:47
【问题描述】：

在此示例中，当您将鼠标悬停在“父链接”下方时，下拉菜单会显示。我只希望当我将鼠标悬停在“父链接”而不是它下方时显示下拉菜单。有没有办法阻止这种情况？

代码笔：Codepen

代码：

<ul class="menu">
  <li>
    <a href="#">Parent Link</a>
    
    <ul>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
    </ul>
  </li>
</ul>

.menu {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 200px;
}

.menu > li > a {
  background: blue;
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.menu ul {
  background: #ddd;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%;
}

.menu li:hover ul {
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.menu ul a {
  color: #000;
  display: block;
  padding: 5px 20px;
}

【问题讨论】：

标签： css menu hover

【解决方案1】：

我能想到的唯一方法是不使用 opacity:1 使用 display:none;当你想显示它时，将其更改为 display:block/flex/grid 或使用 javascript，通过向父链接添加事件侦听器，当 mouseenter 将动画的类切换为活动或名称类以及鼠标离开时切换或删除类。

【讨论】：

【解决方案2】：

您已将悬停设置为所有链接所在的li，您必须将悬停添加到锚标记并使用+ 对作为锚标记兄弟的ul 标记执行操作。

.menu li a:hover + ul {
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}

【讨论】：

【解决方案3】：

这是您当前的代码 -

.menu {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 200px;
}

.menu > li > a {
  background: blue;
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.menu ul {
  background: #ddd;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%;
}

.menu li:hover ul {
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.menu ul a {
  color: #000;
  display: block;
  padding: 5px 20px;
}

<ul class="menu">
  <li>
    <a href="#">Parent Link</a>
    
    <ul>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
    </ul>
  </li>
</ul>

修改代码

只需将menu-ul 更改为display:none 并在悬停时将其更改为display:block

.menu {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 200px;
}
.menu > li > a {
  background: blue;
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.menu ul {
  background-color: #f1f1f1;
  display: none;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%;
}



.menu:hover ul{display: block;}

.menu li:hover ul {
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}


.menu ul a {
  color: #000;
  display: block;
  padding: 5px 20px;
}

<ul class="menu">
  <li>
    <a href="#">Parent Link</a>
    
    <ul>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案4】：

试试这个，在<ul> 上添加display: none;，然后在父鼠标悬停时在<ul> 上添加display:block;。

 .menu ul {
  background: #ddd;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%;
  display: none; /*dont display it yet*/
}

.menu > li:hover ul {
  display: block; /*dispplay ul on hover*/
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.menu {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 200px;
}

.menu > li > a {
  background: blue;
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.menu ul {
  background: #ddd;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%;
  display: none;
}

.menu > li:hover ul {
  display: block;
  height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.menu ul a {
  color: #000;
  display: block;
  padding: 5px 20px;
}

<ul class="menu">
        <li>
          <a href="#">Parent Link</a>
          
          <ul>
            <li><a href="#">Child Link</a></li>
            <li><a href="#">Child Link</a></li>
            <li><a href="#">Child Link</a></li>
            <li><a href="#">Child Link</a></li>
          </ul>
        </li>
      </ul>

【讨论】：