CSS下拉菜单打开：悬停

Posted 2023-05-08

【中文标题】CSS下拉菜单打开：悬停

【英文标题】：CSS Dropdown Menu On :Hover

【发布时间】：2014-01-05 10:09:10

【问题描述】：

如果我“取消悬停”之前悬停的下拉菜单，然后足够快地悬停它显示在后面的空间，下拉菜单将显示回来。有没有办法避免这种行为，或者至少改变你可以将下拉区域悬停到非常低的值而不改变整体菜单转换时间的时间。我正在尝试仅在 li:hover 动作上显示下拉菜单。

演示菜单： http://jsfiddle.net/q7gFR/

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a 
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;

【参考方案1】：

编辑（正如您评论的那样）：答案是 NO，除非您取出 transition 并在 :hover 上启动它，否则您无法修复此行为

---

在:hover 上使用transition 属性，这样当你:hover 退出时，它会在没有任何transition 的情况下消失。

Demo（增加:hover时间仅用于演示目的）

【讨论】：

是的，它有效，但问题是要知道是否可以在不改变菜单过渡效果的情况下实现