css - 鼠标移开时下拉菜单的消失延迟 1 秒，除非返回

Question

这是我的 HTML 导航栏

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

和 Javascript

<script type="text/javascript">

$('#mainnav ul').hide();

$('#mainnav li > a').hover(
      function () {
      //show its submenu
        $('ul', this.parentNode).stop().slideDown(0) = set 
      }
    );

$('#mainnav li').hover(null, 
      function () {
      //hide its submenu
        $('ul', this.parentNode).stop().delay(1000).slideUp(0); 
    });

我从 jsfiddle 中获取了 JavaScript，并让它运行起来。我非常擅长 HTML 和 CSS，但除了相当明显的逻辑之外，我会说 JavaScript 对我来说是陌生的。

有了 CSS，它看起来像这样:

我正在寻找一个 CSS 片段，当我将鼠标关闭(悬停(空))下拉菜单时，它不会立即消失，而是延迟到一秒钟之后，但如果我在它消失之前将鼠标放回菜单上，它不会消失。

我已经看过了，但在网站上找不到任何答案，不仅可以直接解决这个精确的问题，而且还足够简单让我理解。

Answer 1

DEMO我应该说 javascript 不是那种情况的好解决方案..css 是实现这一点的更好方法..无论如何

$(document).ready(function(){
    $('#mainnav li ul').hide()
    $('#mainnav li').on('mouseenter', function(){
        $(this).css('background','yellow');
        $(this).find('ul').slideDown(700);
    });
    $('#mainnav li').on('mouseleave', function(){
        $(this).css('background','none');
        $(this).find('ul').slideUp(700);
    });
});

在 CSS 中 DEMO

#mainnav li{
    background: #eee; 
}
#mainnav li ul li{
    background: none; 
}
#mainnav li:hover{
   background: yellow;
}
#mainnav li:hover ul{
    height: 100px;
    transition-delay: 0s;
     transition-duration: 1s;
}
#mainnav li ul{
    overflow: hidden;
    height: 0px;
    transition-delay: 10s;
    transition-duration: 2s;
}

转换延迟:10s；子菜单将在 10 秒后消失，请稍等