如何让CSS下拉菜单坚持

基于纯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中这应该是非常容易的，但是我的大脑今天肯定很糟糕，因为我无法让它工作。

谢谢！

来源

2011-07-14 aslum

我想这样做，如果你将鼠标悬停在最后一个菜单/子菜单上，并没有消失一秒钟左右？ – Jawad

那么你已经试过的JS代码在哪里？ – Sparky

你可以用.mouseout（）来做到这一点。功能jQuery的，但我建议你看看哈弗意图插件，here

来源

2011-07-14 16:41:35

jQuery已经有了'.hover（）'而不必使用插件。您只需在隐藏时设置超时值，并在用户将鼠标移回时将其清除。 – Endophage

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; 
}

$(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/

来源

2011-07-14 17:05:14

如何让CSS下拉菜单坚持

回答

相关问题