Delay for Menu Hover In Mouse Out

Question

私はRocketTheme Joomlaテンプレートを使用しました。

私はメニューホバーのための遅延を試みました。

メニューホバーの遅延には、CSSの後に使用します。それは働いています。 www.test2.guru99.com/

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

私の要件がある - - マウスがまだ秒間表示され、メニューを移動したときのリンクをご確認ください。

私のサイトのURLがある - www.test2.guru99.com/

私を助けてください！

Answer 1

遷移：のMouseEnterについて[animationTime] [遅延時間] ...

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>

:hoverトリガし、0sのtransition delayルール（遅延なし）があります。
mouseleaveでは、初期ルールが使用されます（2s遅延）。