CSS MAKE HOVEROUT DELAY

Question

I'm trying to delay hover out on the menu with css, I looked through several similars problem on this site but I can't make it work.

this is the base of my code https://jsfiddle.net/rja3spwm/. If someone can point me out some tips to make it work, please thanks.

<div id="menu">
<ul id="nav">

<li><a href="#">SECTION 1</a>
 <ul>
  <li><a href="#">MENU 1</a></li>
  <li><a href="#">MENU 1</a></li>
  <li><a href="#">MENU 1</a></li>
  <li><a href="#">MENU 1</a></li>
 </ul>
</li> 

<li><a href="#">SECTION 2</a>
 <ul>
  <li><a href="#">MENU 2</a></li>
  <li><a href="#">MENU 2</a></li>
  <li><a href="#">MENU 2</a></li>
  <li><a href="#">MENU 2</a></li>
 </ul>
</li> 

<li><a href="#">SECTION 3</a>
 <ul>
  <li><a href="#">MENU 3</a></li>
  <li><a href="#">MENU 3</a></li>
  <li><a href="#">MENU 3</a></li>
  <li><a href="#">MENU 3</a></li>
 </ul>
</li> 


 </ul>

</div>

No...the `display` property cannot be transitioned or animated. You would need another method of making the menu visible or use javascript — Paulie_D, Apr 01 '16 at 17:23
This is not quite a duplicate of that question. That question shows how to delay on a very simple element. Much more complicated when doing it with a menu — JoshBerke, Apr 01 '16 at 17:53

score 2 · Answer 1 · answered Apr 01 '16 at 17:14

2

You can use CSS3 animations I forked your fiddle

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 962px;
  height: auto;
  position: absolute;
  margin: 40px 0 0 0;
  background: #58D3F7 url(../img/menu-child.png) repeat-x; 
  z-index: 9999; 
  animation-name: example;
  animation-duration: 250ms;
  animation-iteration-count:1;
  animation-direction: reverse;
}


@keyframes example {

    25% {
      display: block;
      opacity:.75
    }
    50% {
      display: block;
      opacity:.50
    }
    75% {
      display: block;
      opacity:.25
    }

    100% {
      display: block;
      opacity:0
    }
}

Edit Just saw you said hover out so I assume you want to delay when it closes. let me see...

answered Apr 01 '16 at 17:14

JoshBerke

66,142
25
126
164

I want it to stay open for a few seconds when hover out and not hovering in on another section. – Bryan Gabriel Macuer Apr 01 '16 at 17:29
Yea to bad display is not animatable but I bet if you look into one of the animation libraries animate.cs for example you could find some hints – JoshBerke Apr 01 '16 at 17:32
I'm checking them right now, if not I will have to use jquery. thanks! – Bryan Gabriel Macuer Apr 01 '16 at 17:34
Yep I've tried playing around, Ive never messed with animations but I don't see a way to do it with pure CSS. Basically as soon you hover out the display:none kicks in. I do like the animation for displaying the menu though – JoshBerke Apr 01 '16 at 17:39
Check out the link on the comments on other answer: http://stackoverflow.com/a/16203300/26160 definetly looks plausible – JoshBerke Apr 01 '16 at 17:41
Im also checking on that trying to added to my code but it deforms it. Check https://jsfiddle.net/rja3spwm/9/ – Bryan Gabriel Macuer Apr 01 '16 at 17:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107976/discussion-between-joshberke-and-bryan-gabriel-macuer). – JoshBerke Apr 01 '16 at 17:51

score -3 · Answer 2 · answered Apr 01 '16 at 17:11

-3

There is no way to make delay by CSS, use JavaScript for that

answered Apr 01 '16 at 17:11

Arturas Lapinskas

336
2
14

Why do you think that? see for example: [stackoverflow question](http://stackoverflow.com/questions/16203240/i-want-to-apply-delay-on-mouse-out-in-css) – michaPau Apr 01 '16 at 17:17

CSS MAKE HOVEROUT DELAY

2 Answers2