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;
}

使用此代码可以解决其完美的过渡效果和下拉菜单问题。

悬停子菜单没有保持打开状态

3 个答案: