鼠标关闭后，导航下拉以保持几秒钟

Question

我正在尝试使用我的网站http://www.saota.com/上的http://creativepreview.co.za/noero下拉菜单获得类似的结果。我无法弄清楚在悬停状态下使用什么css来实现这一点。 我试过了

#top-menu li li:hover{
    transition: 3s ease;
}

但这不起作用。

Answer 1

将过渡设置为两者。

顶级菜单li li {过渡：全部轻松;}

top-menu li li：hover {transition：all 3s ease;}

Answer 2

使用visibility隐藏/显示子菜单。转换不适用于visibility:visible/hidden或display:none/block等非数字值。你应该尝试用opacity或其他过渡风格隐藏/显示它。

我也看到你在悬停时添加了一些类。使用javascript添加/删除类也不是过渡性的。因此，请注意提供适合您目的的代码。

见下面的例子

P.S。下次，在这里发布您的代码，并举例说明您的问题，不要链接到外部网站。您的问题可以被关闭/删除

ul.first ul {
  opacity: 0;
  transition: 3s;
}

ul.first li:hover ul {
  opacity: 1;
}

ul.second ul {
  visibility: hidden;

  transition: 3s;
}

ul.second li:hover ul {
  visibility: visible;

}

<ul class="first">
<li>Hover Me OPACITY
	<ul>
	<li>ooo</li>
	<li>aaaa</li>
	</ul>
</li>
</ul>
<ul class="second">
<li>Hover Me VISIBLITY
	<ul>
	<li>ooo</li>
	<li>aaaa</li>
	</ul>
</li>
</ul>