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/

Answer 2

您可以使用.mouseout（）;在jQuery中运行，但我建议你查看Hover Intent插件，here

如何让css下拉菜单保持不变

2 个答案: