使導航欄與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。