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动画我分叉您的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
    }
}

编辑刚刚看到你说徘徊，所以我假设你想要在它关闭时延迟。让我看看...

Answer 2

没有办法让CSS延迟，为此使用JavaScript

CSS使HOVEROUT DELAY

2 个答案: