CSS：在悬停时向子菜单下拉添加延迟（Bootstrap 3 / MegaNavbar 2.2）

Question

现在我正式绝望了。我买了一个脚本来在我的网站上使用 MegaMenu。脚本是 MegaNavBar 2.2 http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282

我想让脚本在悬停时打开子菜单，所以我按照演示页面（见上文）中的描述配置了它。

这很好用。但我想添加一个延迟，因为它会刺激用户，如果他们将鼠标指针从上到下移动，并且每次悬停时菜单都会立即打开。

我尝试了什么：

寻求支持 - 无人回答
正在尝试添加动画和动画延迟动画正在运行，但延迟不起作用，我认为是因为 "display:block"
正在尝试添加过渡过渡不起作用，因为过渡不适用于 "display:block".

有没有人可以帮我解决这些问题？

这是我的 Bootply： https://www.bootply.com/A50M0Wk9NK

（假定的 css 规则位于粘贴的 css 代码的第 29 行）

此致，迈克尔

Answer 1

您可以尝试使用Visibility而不是Display，从而使用transitions。例如：

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay:2s;  //set delay here
}

CSS：在悬停时向子菜单下拉添加延迟（Bootstrap 3 / MegaNavbar 2.2）

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

javascript

css

jquery

megamenu

twitter-bootstrap