懸停時的展開式菜單

Question

我想製作一個導航欄，並將其懸停在導航欄內的某個按鈕上時展開。
這裏是什麼我想要做的圖像模式：

下面是一個例子HTML：

<nav> 
    <ul> 
     <li> 
      <p id="eventsButton" class="eName">Events</p> 
     </li> 
    </ul> 
</nav> 
<div class="list"> 
    Here is the list of events 
    <li>Event</li> 
    <li>Event</li> 
    <li>Event</li> 
</div> 

示例網站，菜單像我想要做：unheap.com

我問題是：
對於帶有n個按鈕和n個可擴展列表的網站，該如何看起來像一個javascript/jquery代碼？
這樣的菜單會讓整個網站加載更難嗎？
謝謝！
的jsfiddle爲HTML：http://jsfiddle.net/YnTXR/

Answer 1

如果你不需要建立自己的解決方案，你可以使用一個現有的：

• jQuery Multilevel - Demo
• Multi-Level Push Menu
• Responsive Multi-Level Menu

還有其他那裏，你只需要搜索。

Answer 2

你就可以開始喜歡this Fiddle

$('nav ul li').mouseover(function(){ 
    $('.list').show();      
}); 
$('nav ul li').mouseout(function(){ 
    $('.list').hide();      
}); 

.list { 
    display:none; 
    margin:0px; 
    padding:0px; 
    background:green; 
    width:150px; 
    height: 400px; 
    top:0px; 
    margin-left:86px; 
    z-index:10; 

}

您可以使用

.animate() 

把額外的效果