悬停在“父链接”下时如何阻止下拉菜单掉落？

问题描述

在本例中，当您将鼠标悬停在“父链接”下方时，会显示下拉菜单。我只希望在我将鼠标悬停在“父链接”上而不是在其下方时显示下拉菜单。有什么办法可以阻止吗？

代码笔：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;
}

解决方法

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

,

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

.menu li a:hover + ul {
  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%;
}

.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>

,

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

 .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>