鼠标悬停时菜单悬停的延迟

Question

我已经使用了RocketTheme Joomla模板。

我有尝试延迟菜单悬停。

我想在菜单悬停中使用以下css作为延迟。 它正在工作。 请检查链接-www.test2.guru99.com/

.gf-menu li .dropdown {
transition: opacity 5.0s ease-out 0.0s;
}

我的要求是-移出鼠标后，菜单仍会显示几秒钟。

我的网站网址是-www.test2.guru99.com/

请帮我！

Answer 1

转换：[animationTime] [delayTime] ...

 li > ul{ visibility:hidden; opacity:0; transition: 0.5s 2s; /* put the mouseleave wait time here */ } li:hover > ul{ visibility:visible; opacity:1; transition: 0.5s 0s; /* put the mouseenter wait time here */ } 

 <ul> <li> <a>List item (will take 2sec to fade out)</a> <ul> <li><a>Sub-List item 1</a></li> <li><a>Sub-List item 2</a></li> </ul> </li> </ul> 

在mouseenter上， :hover将触发，并且transition delay规则为0s （无延迟）。
在mouseleave上，将使用初始规则（延迟2s ）。