悬停时的展开式菜单

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() 

把额外的效果