悬停子菜单不会保持打开状态

Question

我制作了全宽下拉子菜单。问题是当我尝试将鼠标从主列表移动到子菜单时子菜单消失了。此外，不应用子菜单上的转换。我写的代码在下面。请检查并更正。

body {
  margin: 0;
  padding: 0;
}

ul,
li,
a {
  list-style: none;
  text-decoration: none;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 100px;
  height: 100px;
  text-align: center;
}

.list li {
  display: inline-block;
  margin: 20px;
}

.list>li:hover ul {
  display: list-item;
  opacity: 1;
}

.list>li:hover>a {
  color: red;
}

.sub_list {
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  width: 100%;
  height: 100px;
  left: 0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
}

.sub_list li {
  display: inline-block;
  margin: 20px;
}

.sub_list li a:hover {
  color: red;
}

<div class="wrap">
  <ul class="list">
    <li><a href="#">list-1</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-2</a></li>
    <li><a href="#">list-3</a></li>
    <li><a href="#">list-4</a></li>
    <li><a href="#">list-5</a></li>
  </ul>
</div>

当鼠标在子菜单 div 的整个区域（屏幕的 100% 宽度）上时，我想让子菜单保持可见。

请帮忙 谢谢

Answer 1

除了其他答案中解决的有关边距/填充/定位的问题外，转换不起作用，因为您无法从 display: none; 转换到另一个状态，反之亦然。相反，仅依靠opacity 并添加pointer-events 属性，这样子菜单本身就不会触发悬停或在隐藏时覆盖任何其他内容。

这是完整的工作代码：

body {
  margin: 0;
  padding: 0;
}

ul, li, a {
  list-style: none;
  text-decoration: none;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 100px;
  height: 100px;
  text-align: center;
}

.list li {
  display: inline-block;
  padding: 20px;
}

.list > li:hover ul {
  pointer-events: all;
  opacity: 1;
}

.list > li:hover > a {
  color: red;
}

.sub_list {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
  pointer-events: none;
}

.sub_list li {
  display: inline-block;
  margin: 20px;
}

.sub_list li a:hover {
  color: red;
}

<div class="wrap">
  <ul class="list">
    <li><a href="#">list-1</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-2</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-3</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-4</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-5</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

您的代码很完美，但存在一些小问题。

使用这个css代码：

.sub_list {
  opacity: 0;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  transition-property: opacity, margin-top, visibility;
  visibility: hidden;
  margin: 50px 0 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 50px;
  text-align: center;
}

.list > li:hover ul {
    margin-top:0;
    opacity: 1;
    visibility: visible;
}

使用此代码其工作完美的过渡效果和下拉子菜单问题得到解决。

Answer 3

我为你解决了这个问题：https://codepen.io/anon/pen/rboPLE 这是我改变的：

  .list li {
        display: inline-block;
        padding: 20px; // this line was margin: 20px; before
    }

当您尝试访问子菜单时，您离开了 .list li 项目，因为它有一个边距。使用 Padding，空间属于元素，当您将鼠标移动到子菜单时，它仍然悬停。

我在上面的链接中为示例着色，以便您可以看到元素边界。