jquery - 如何使CSS下拉菜单持久化

Question

我有一个基于嵌套列表的纯 CSS 下拉菜单

基本的 CSS:

#nav li ul {
  display:none;
  padding-right:3px;
  padding-bottom:3px;
  font-size: 9px;
}
#nav li ul:hover, #nav li:hover ul {
  display:inline;
  position:absolute;
  top:28px;
  background-color: #fc3;
}

列表:

<ul id="nav">
  <li><a href="hours.php>Hours</a>
    <ul id="navhours">
      <li><a href="hours.php?id=1">Blacksburg</a></li>
      <li><a href="hours.php?id=2">Meadowbrook</a></li>
      <li><a href="hours.php?id=3">Floyd</a></li>
    </ul>  
  </li>
 <li><a href="navabout">About Us</a>
   <ul id="navabout">
     <li><a href="director.php">Director</a></li>
     <li><a href="board.php">Board of Trustees</a></li>
   </ul>
 </li>
</ul>

我想做到这一点，如果您将鼠标完全移出，您悬停在其上的最后一个菜单/子菜单不会消失一秒钟左右。我觉得这在 jQuery 中应该非常简单，但今天我的大脑一定是糊涂了，因为我无法让它工作。

谢谢!

Answer 1

html

<ul id="nav">
  <li><a href="hours.php">Hours</a>
    <ul id="navhours">
      <li><a href="hours.php?id=1">Blacksburg</a></li>
      <li><a href="hours.php?id=2">Meadowbrook</a></li>
      <li><a href="hours.php?id=3">Floyd</a></li>
    </ul>  
  </li>
 <li><a href="navabout">About Us</a>
   <ul id="navabout">
     <li><a href="director.php">Director</a></li>
     <li><a href="board.php">Board of Trustees</a></li>
   </ul>
 </li>
</ul>

CSS

#nav li ul {
  display:none;
  padding-right:3px;
  padding-bottom:3px;
  font-size: 9px;
  position:absolute;
  top:28px;
  background-color: #fc3;
}

js

$(document).ready(function(){
    $("#nav li").hover(function(){
        $("#nav li ul").stop().hide();
        $(this).find("ul").css("display","inline");
    },function(){
        $(this).find("ul").delay(1000).queue(function(){
            $(this).hide();
        });
    });
});

http://jsfiddle.net/FsVaX/