Css 保持wordpress子菜单打开几秒钟

我有一个像这样的wordpress菜单：

<div id="top_menu">
  <ul class="menu">
    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1"><a href="moo">moo</a>
      <ul class="sub-menu">
        <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="foo">foo</a></li>
        <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="bar">bar</a></li>
      </ul>
    </li>
    <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a href="baz">baz</a></li>
  </ul>
</div>

你可以在这里看到：

现在，如果你浏览“moo”子菜单，会显示foo和bar。我现在的目标是在鼠标移出“moo”链接区域后，保持子菜单打开2秒钟。我该怎么做

我将感谢任何帮助

使用javascript（jQuery）显示子菜单并应用

---

既然你提到了css，我就要发布这个。使用css3转换实现您想要的

下面是一个使用jquery和当前css的替代javascript解决方案

​​​​$("li").mouseout(function(){
    var uls =$(this).children("ul");
    uls.css("left","auto");
setTimeout(function(){ uls.css("left",""); }, 2000);
});​​​

---

您需要的兼容性是什么？例如，css转换可以工作，但并不兼容所有浏览器。只要它工作，这并不重要；）我将使用jQuery进行lgo，因为这似乎是最简单的答案。谢谢，但这似乎不起作用-“显示：”正在立即从“块”切换到“无”，忽略延迟…尝试用淡出（）替换隐藏（）

$('#top_menu li').hover(function(){
    $('.sub-menu', this).show();
}, function(){
    $('.sub-menu', this).delay(2000).hide();
});

​​​​$("li").mouseout(function(){
    var uls =$(this).children("ul");
    uls.css("left","auto");
setTimeout(function(){ uls.css("left",""); }, 2000);
});​​​