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”一起使用。

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

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

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

最好的问候， 迈克尔

Answer 1

您可以尝试使用可见性而不是显示，从而使用过渡。 例如：

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
}