使导航栏与onhover下拉列表

Question

吨的网站有此功能，其中悬停在导航栏中的链接扩展下拉列表更多的细节。有无数这样的网站， The Dell和Nvidia主页是两个例子。

我查了一下，好像你必须改变列表onMouseover和onmouseout的可见性。

我该如何复制这种效果？

Answer 1

看看DynamicDrive.com。他们有很多菜单，很多都有下拉效果。它们都包含关于如何实现它们的教程。

http://www.dynamicdrive.com/dynamicindex1/index.html

Answer 2

许多不同的方式来做到这一点。最容易使用像droppy（）这样的jquery插件 - 我们已经在很多地方使用了这个插件。 http://onehackoranother.com/projects/jquery/droppy/

你可以在这里代码：http://plugins.jquery.com/project/droppy

它是在2008年提出，但它是非常小的，并使用jQuery的稳定。我们在jQuery 1.5+和1.6+的生产中使用它。看看这些例子：http://lvsys.com/，http://noblepigwine.com这里太嵌套层次：http://pacificnwvacations.com/ ----它的灵活

示例标记（不CSS）

<ul id="top-menu"> 
     <li>Home</li> 
     <li>Product</li> 
     <li>About</li> 
     <li><a href='#'>Services</a> 
      <ul> 
       <li>Sub item 1</li> 
       <li>Sub item 2</li> 
      </ul> 
     </li> 
    <ul> 



<script type='text/javascript'> 
     $(function() { 
     $('#top-menu').droppy(); 
     }); 
</script> 

检查出一个完整的例子在droppy插件页面包括CSS。