Q966-溜溜Show
热门标签：
 

 DIV+CSS黑色超酷多级菜单

huang   发表时间:2009-02-04 13:58:52   分类:WEB标准   浏览( )   评论( )   收藏日志
添加到网摘：

用DIV+CSS来实现黑色超酷多级菜单
 

HTML 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. body {
  8. margin: 7px;
  9. font:12px Verdana, Arial, Helvetica, sans-serif;
  10. }
  11. * {
  12. list-style-type: none;
  13. margin: 0px;
  14. padding: 0px;
  15. border: thin none;
  16. }
  17. #nav {
  18. position: absolute;
  19. font-size: 9px;
  20. opacity: 0.8;
  21. }
  22. #nav a {
  23. display: block;
  24. width: 100px;
  25. height: 15px;
  26. padding: 3px 5px 12px;
  27. background: #666;
  28. color: #fff;
  29. text-decoration: none;
  30. }
  31. #nav a:hover {
  32. background: #333;
  33. }
  34. #nav li {
  35. float: left;
  36. clear: left;
  37. width: 120px;
  38. background: #ccc;
  39. padding-bottom: 3px;
  40. }
  41. #nav ul {
  42. position: absolute;
  43. margin-left: 115px;
  44. margin-top: -30px;
  45. }
  46. #nav ul {
  47. display: none;
  48. }
  49. #nav li.show ul {
  50. display: block;
  51. }
  52. #nav li.show li ul {
  53. display: none;
  54. }
  55. #nav li li.show ul {
  56. display: block;
  57. }
  58. </style>
  59. <script language="javascript" type="text/javascript">
  60. function menuFix() {
  61. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  62. for (var i=0; i<sfEls.length; i++) {
  63. sfEls[i].onmouseover=function() {
  64. this.className+=(this.className.length>0? " ": "") + "show";
  65. }
  66. sfEls[i].onmouseout=function() {
  67. thisthis.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
  68. }
  69. }
  70. }
  71. window.onload=menuFix;
  72. </script>
  73. </head>
  74. <body>
  75. <ul id="nav">
  76. <li><a href="#">nav item</a>
  77. <ul>
  78. <li><a href="#">nav item</a>
  79. <ul>
  80. <li><a href="#">nav item</a></li>
  81. <li><a href="#">nav item</a></li>
  82. </ul>
  83. </li>
  84. <li><a href="#">nav item</a>
  85. <ul>
  86. <li><a href="#">nav item</a></li>
  87. <li><a href="#">nav item</a></li>
  88. <li><a href="#">nav item</a></li>
  89. <li><a href="#">nav item</a></li>
  90. <li><a href="#">nav item</a></li>
  91. <li><a href="#">nav item</a></li>
  92. <li><a href="#">nav item</a></li>
  93. <li><a href="#">nav item</a></li>
  94. <li><a href="#">nav item</a></li>
  95. <li><a href="#">nav item</a></li>
  96. </ul>
  97. </li>
  98. <li><a href="#">nav item</a>
  99. <ul>
  100. <li><a href="#">nav item</a></li>
  101. <li><a href="#">nav item</a></li>
  102. <li><a href="#">nav item</a></li>
  103. <li><a href="#">nav item</a></li>
  104. <li><a href="#">nav item</a></li>
  105. <li><a href="#">nav item</a></li>
  106. <li><a href="#">nav item</a></li>
  107. <li><a href="#">nav item</a></li>
  108. <li><a href="#">nav item</a></li>
  109. <li><a href="#">nav item</a></li>
  110. <li><a href="#">nav item</a></li>
  111. <li><a href="#">nav item</a></li>
  112. </ul>
  113. </li>
  114. <li><a href="#">nav item</a>
  115. <ul>
  116. <li><a href="#">nav item</a></li>
  117. <li><a href="#">nav item</a></li>
  118. <li><a href="#">nav item</a></li>
  119. <li><a href="#">nav item</a></li>
  120. <li><a href="#">nav item</a></li>
  121. <li><a href="#">nav item</a></li>
  122. </ul>
  123. </li>
  124. </ul>
  125. </li>
  126. <li><a href="#">nav item</a>
  127. <ul>
  128. <li><a href="#">nav item</a></li>
  129. <li><a href="#">nav item</a></li>
  130. <li><a href="#">nav item</a></li>
  131. <li><a href="#">nav item</a></li>
  132. <li><a href="#">nav item</a></li>
  133. <li><a href="#">nav item</a></li>
  134. </ul>
  135. </li>
  136. <li><a href="#">nav item</a>
  137. <ul>
  138. <li><a href="#">nav item</a></li>
  139. <li><a href="#">nav item</a></li>
  140. <li><a href="#">nav item</a></li>
  141. <li><a href="#">nav item</a></li>
  142. <li><a href="#">nav item</a></li>
  143. <li><a href="#">nav item</a></li>
  144. </ul>
  145. </li>
  146. </ul>
  147. </body>
  148. </html>

 

 DIVCSS效果特效技巧网站超酷菜单
 让IE浏览WAP网站 网站Input的限制高级用法 
正在读取日志的评论数据,请稍后……
正在加载日志评论签写框，请稍后……
溜溜show会员登录
正在载入溜溜show会员登录...
溜溜show 分类列表
溜溜show 日志归档
溜溜show 热门日志
溜溜show 推荐日志
溜溜show 最新评论
{$SideComment}
溜溜show 最新留言
{$SideGB}
溜溜 阿里妈妈广告
友情链接

Copyright © 2009-2020 溜溜show Q966.com. All Rights Reserved

程序运行时间:毫秒

桂ICP备08101608号