首页>>导航菜单>>漂亮的动画下拉导航菜单(2014-04-22)

漂亮的动画下拉导航菜单

 js和css请到演示页面查看

漂亮的动画下拉导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="menu" style=" margin-top:20px;">  
  2. <ul class="menu">  
  3. <li><a href="#" class="parent"><span>Home</span></a>  
  4. <ul>  
  5. <li><a href="#" class="parent"><span>Sub Item 1</span></a>  
  6. <ul>  
  7. <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>  
  8. <ul>  
  9. <li><a href="#"><span>Sub Item 1.1.1</span></a></li>  
  10. <li><a href="#"><span>Sub Item 1.1.2</span></a></li>  
  11. </ul>  
  12. </li>  
  13. <li><a href="#"><span>Sub Item 1.2</span></a></li>  
  14. <li><a href="#"><span>Sub Item 1.3</span></a></li>  
  15. <li><a href="#"><span>Sub Item 1.4</span></a></li>  
  16. <li><a href="#"><span>Sub Item 1.5</span></a></li>  
  17. <li><a href="#"><span>Sub Item 1.6</span></a></li>  
  18. <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>  
  19. <ul>  
  20. <li><a href="#"><span>Sub Item 1.7.1</span></a></li>  
  21. <li><a href="#"><span>Sub Item 1.7.2</span></a></li>  
  22. </ul>  
  23. </li>  
  24. </ul>  
  25. </li>  
  26. <li><a href="#"><span>Sub Item 2</span></a></li>  
  27. <li><a href="#"><span>Sub Item 3</span></a></li>  
  28. </ul>  
  29. </li>  
  30. <li><a href="#" class="parent"><span>Product Info</span></a>  
  31. <ul>  
  32. <li><a href="#" class="parent"><span>Sub Item 1</span></a>  
  33. <ul>  
  34. <li><a href="#"><span>Sub Item 1.1</span></a></li>  
  35. <li><a href="#"><span>Sub Item 1.2</span></a></li>  
  36. </ul>  
  37. </li>  
  38. <li><a href="#" class="parent"><span>Sub Item 2</span></a>  
  39. <ul>  
  40. <li><a href="#"><span>Sub Item 2.1</span></a></li>  
  41. <li><a href="#"><span>Sub Item 2.2</span></a></li>  
  42. </ul>  
  43. </li>  
  44. <li><a href="#"><span>Sub Item 3</span></a></li>  
  45. <li><a href="#"><span>Sub Item 4</span></a></li>  
  46. <li><a href="#"><span>Sub Item 5</span></a></li>  
  47. <li><a href="#"><span>Sub Item 6</span></a></li>  
  48. <li><a href="#"><span>Sub Item 7</span></a></li>  
  49. </ul>  
  50. </li>  
  51. <li><a href="#"><span>Help</span></a></li>  
  52. <li class="last"><a href="#"><span>Contacts</span></a></li>  
  53. </ul>  
  54. </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_314.html