延遲菜單鼠標懸停

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將觸發，並有中0s（無延遲）的transition delay規則。
在mouseleave上將使用初始規則（延遲2s）。