我有一个基于嵌套列表的纯 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 中应该非常简单,但今天我的大脑一定是糊涂了,因为我无法让它工作。
谢谢!
最佳答案
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();
});
});
});
关于jquery - 如何使CSS下拉菜单持久化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6696792/