悬停子菜单未保持打开状态

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

我为你修复了这个问题：https://codepen.io/anon/pen/rboPLE这是我所做的修改：

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

当您试图到达子菜单时，您离开了.list li项，因为它有一个空白处。使用填充时，空格属于元素，当您将鼠标移到子菜单时，它仍然悬停。

我在上面的链接中给示例着色，这样你就可以看到元素的边界。

Answer 3

您的代码是完美的，但有一些小问题。

使用以下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;
}

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