首页>>导航菜单>>极简单jquery下拉菜单(2013-09-02)

极简单jquery下拉菜单

 非常简单的一个jq菜单，没有任何多余的代码，也很方便移植到小网站。

极简单jquery下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code复制内容到剪贴板
  1. <div class="menu">   
  2. <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a>   
  3. <div>   
  4. <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>   
  5. </div>   
  6. </span><span><a href="#">菜单三</a>   
  7. <div>   
  8. <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a>   
  9. </div>   
  10. </span>   
  11. </div>   
  12. <style type="text/css">   
  13. .menu span   
  14. {   
  15. float: left;   
  16. margin-right: 10px;   
  17. position: relative;   
  18. z-index: 100;   
  19. }   
  20. .menu a   
  21. {   
  22. text-decoration: none;   
  23. display: block;   
  24. }   
  25. .menu span:hover div, .menu span div:hover   
  26. {   
  27. display: block;   
  28. }   
  29. .menu span div   
  30. {   
  31. border: 1px solid black;   
  32. padding: 5px;   
  33. background-color: white;   
  34. display: none;   
  35. position: absolute;   
  36. white-space: nowrap;   
  37. }   
  38. </style>   
  39. <script type="text/javascript">   
  40. $(document).ready(function() {   
  41. if ($.browser.msie && $.browser.version <= 6.0) {   
  42. $(".menu span").hover(   
  43. function() {   
  44. $(this).children("div").attr("style", "display: block");   
  45. },   
  46. function() {   
  47. $(this).children("div").attr("style", "");   
  48. })   
  49. }   
  50. });   
  51. </script>   

 


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