CSS使悬停延迟

Question

我试图用css延迟悬停在菜单上，我在这个网站上查看了几个类似的问题，但我无法使其工作。

这是我代码的基础https://jsfiddle.net/rja3spwm/.如果有人能给我一些建议，让它发挥作用，请谢谢。

<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>

Answer 1

你可以使用CSS3动画我分叉你的小提琴

/* 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
    }
}

编辑刚才看到你说悬停在外，所以我想你想推迟它关闭的时间。让我看看。。。

Answer 2

CSS无法延迟，请使用JavaScript进行