Question

我正试图让菜单在离开悬停时延迟关闭（3级菜单的宽恕因素）。我已加入transition-property: visibility;和transition-duration: 2s;，但它没有做任何事情。我错过了什么？

如果有更好的方法来实现宽恕因素，我当然也会对此持开放态度。

*更新我已将示例简化为2层菜单。有一个example post here，但我不确定这个有什么不同。

html

<ul class="nav">
  <li class="top"><a class="top_link">Grades</a>
    <ul class="sub">
      <li><a class="fly">Grade 1</a></li>
    </ul>
  </li>
</ul>

css

.nav {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 36px;
  position: relative;
}

.nav ul {
  -moz-transition-property: visibility;
  -moz-transition-duration: 2s;
  -webkit-transition-property: visibility;
  -webkit-transition-duration: 2s;
  transition-property: visibility;
  transition-duration: 2s;
}

.nav li.top {
  display: block;
  float: left;
}

.nav li a.top_link {
  display: block;
  float: left;
  height: 36px;
  line-height: 27px;
  padding: 0 0 0 12px;
}

.nav li:hover {
  position: relative;
}

.nav ul {
  position: absolute;
  margin: 0;
  list-style: none;
  display: none;
}

.nav li:hover > ul {
  display: block;
}

.nav li:hover ul.sub {
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #3a93d2;
  white-space: nowrap;
  width: auto;
  height: auto;
}

Answer 1

转换效果只会影响visibility属性，如果这是在常规状态和悬停状态之间更改的属性。现在，您正在尝试为visibility设置动画，但是您正在使用display: none显示/隐藏该元素。不要使用display，而是更改visibility值。

这应该有效：

.nav ul {
  position: absolute;
  margin: 0;
  list-style: none;
  visibility: hidden;
}

.nav li:hover > ul {
  visibility: visible;
}

Answer 2

如果有人想在子菜单中看到温和淡出的工作解决方案，则它在下面。需要调整才能让它在离开悬停时褪色，但会立即显示在悬停上。

In a fiddle

html

{{1}}

css

{{1}}

CSS转换可见性不适用于下拉菜单

2 个答案: