Delay For Menu Hover In Mouse Out

Question

I have used RocketTheme Joomla Templates.

I have Try to Delay for Menu hover.

I want used following css for Delay in menu hover. And it's working. Please check link - www.test2.guru99.com/

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

My Requirement is - when the mouse is moved out menu still appear for seconds.

My site url is - www.test2.guru99.com/

Please Help me!

Answer 1

transition: [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> 

On mouseenter the :hover will trigger, and there's the transition delay rule of 0s (no delay).
On mouseleave the initial rule will be used ( 2s delay).