CSS 过渡可见性不适用于下拉菜单答案

【问题标题】：CSS Transition Visibility Not Working for drop down menuCSS 过渡可见性不适用于下拉菜单
【发布时间】：2016-07-21 03:08:36
【问题描述】：

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

如果有更好的方法来实现宽恕因素，我当然也愿意接受。

A fiddle is here

*UPDATE 我已将示例简化为 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;
}

【问题讨论】：

标签： css drop-down-menu css-transitions

【解决方案1】：

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

这应该可行：

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

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

【讨论】：

谢谢。当我将工作链接与我的链接进行比较时，我才发现。说得通。我想知道 3 级菜单的 visibility 会对布局做些什么，因为 visibility 意味着菜单仍然占用空间。
过渡到不可见的奇怪行为 - 子菜单失去了位置和颜色。任何想法为什么？
看起来像是花车之一。奇怪的。感谢您的帮助。
CSS .nav li:hover ul.sub 的最后一部分为ul.sub 添加了几个属性，但仅限于悬停状态。当悬停停止时，这些属性会立即消失，但 visibilty 由于延迟而仍然存在。将选择器更改为 .nav li ul.sub 或将您的 transition-property 更改为 all。

【解决方案2】：

如果有人想在子菜单中看到具有柔和淡出效果的工作解决方案，则如下所示。需要进行调整才能使其仅在离开悬停时消失但在悬停时立即显示。

In a fiddle

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 {
  list-style: none;
  position: relative;
}

.nav ul {
  visibility: hidden;
  opacity: 0;
  transition-property: visibility, opacity;
  -moz-transition-property: visibility, opacity;
  -webkit-transition-property: visibility, opacity;

  transition-timing-function: linear;
  -moz-transition-function: linear;
  -webkit-transition-function: linear;

  transition-duration: 0s, 0.5s;
  -moz-transition-duration: 0s, 0.5s;
  -webkit-transition-duration: 0s, 0.5s;

  transition-delay: 0.5s, 0s;
  -moz-transition-delay: 0.5s, 0s;
  -webkit-transition-delay: 0.5s, 0s;
}

.nav li {
  position: relative;
}

.nav li.top {
  float: left;
}

.nav li a.top_link {
  float: left;
  height: 36px;
}

.nav ul {
  position: absolute;
  visibility: hidden;
}

.nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-duration: 0s;
  -moz-transition-duration: 0s;
  -webkit-transition-duration: 0s;

  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.nav li ul.sub {
  background: #fff;
  white-space: nowrap;
  left: 0;
  top: 100%;
}

【讨论】：