如何讓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下拉菜單堅持

回答

相關問題