使用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。