使用悬停下拉列表制作导航栏

Question

大量网站都具有此功能，将鼠标悬停在导航栏中的链接上会扩展包含更多详细信息的下拉菜单。 有无数这样的网站，戴尔和英伟达的主页就是两个例子。

我已经查过了，似乎您必须更改列表 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+ 的生产中使用它。 Check out these examples: http://lvsys.com/ , http://noblepigwine.com and here too for nested levels: http://pacificnwvacations.com/ ---- it's flexible

示例标记（没有 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。