鼠標懸停時菜單懸停的延遲

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 ）。