0

I'm trying to delay menu hover by 15s after the user has floated off it. I'd like to do this using only css, not Javascript. Possible? Ay the moment the user hovers over it and, when the cursor is dormant for a few seconds, the menu disappears.

Tried:

ul.dropdown-menu li  { transition: 
0s background-color;}

ul.dropdown-menu li a:hover { 
transition-delay: 15s; }

Doesn't work.

<div class="collapse navbar- 
collapse navbar-ex1-collapse">. 
<ul 
id="menu" class="menu"><li 
id="menu-item-1496" 
class="menu- 
item menu-item-type-post_type 
menu- 
item-object-page menu-item-home 
current-menu-item page_item 
page- 
item-19 current_page_item menu- 
item-has-children menu-item- 
1496 
dropdown active"><a 
title="Home" 
href="https://adsler.c
o.uk/">Home 
</a><span class="dropdown- 
toggle 
shapely-dropdown" data- 
toggle="dropdown"><i class="fa 
fa- 
angle-down" aria- 
hidden="true">. 
</i>. </span>
<ul role="menu" class=" 
dropdown-menu">
<li id="menu-item-1502" class="fa 
fa-user menu-item menu-item-type- 
post_type menu-item-object-page 
menu-item-1502"><a title="Create 
Adsler Account" 
href="https://adsler.co.uk/create- 
account/">Create Adsler 
Account</a>.  </li>
  • @Paulie That's as small as i can make it. Thanks –  May 20 '19 at 13:07
  • Possible duplicate of https://stackoverflow.com/questions/9393125/delay-mouseout-hover-with-css3-transitions – Jar May 20 '19 at 13:10
  • Thanks Jared.... seen it. My problem is different and this doesn't solve it.... wish it did :-) –  May 20 '19 at 13:13

1 Answers1

0

You need to swap your delay and animation to the regular state, check this article by css tricks on how to achieve your desired result.

Jalu
  • 332
  • 3
  • 13
  • @Stack no problem, had the same issue just report back and update if it was helpful. – Jalu May 20 '19 at 13:28
  • So tried it but didn't work.....thanks for trying though... How did your solve your menu? –  May 20 '19 at 17:21