红色大气导航菜单二级下拉菜单纯CSS代码特效源码

  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>css下拉菜单演示</title>
  5. <style type="text/css">
  6. <!--

  8. *{margin:0;padding:0;border:0;}
  9. body {
  10. font-family: arial, 宋体, serif;
  11.         font-size:12px;
  12. }


  15. #nav {
  16.   line-height: 24px;  list-style-type: none; background:#666;
  17. }

  19. #nav a {
  20. display: block; width: 80px; text-align:center;
  21. }

  23. #nav a:link  {
  24. color:#666; text-decoration:none;
  25. }
  26. #nav a:visited  {
  27. color:#666;text-decoration:none;
  28. }
  29. #nav a:hover  {
  30. color:#FFF;text-decoration:none;font-weight:bold;
  31. }

  33. #nav li {
  34. float: left; width: 80px; background:#CCC;
  35. }
  36. #nav li a:hover{
  37. background:#999;
  38. }
  39. #nav li ul {
  40. line-height: 27px;  list-style-type: none;text-align:left;
  41. left: -999em; width: 180px; position: absolute;
  42. }
  43. #nav li ul li{
  44. float: left; width: 180px;
  45. background: #F6F6F6;
  46. }


  49. #nav li ul a{
  50. display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
  51. }

  53. #nav li ul a:link  {
  54. color:#666; text-decoration:none;
  55. }
  56. #nav li ul a:visited  {
  57. color:#666;text-decoration:none;
  58. }
  59. #nav li ul a:hover  {
  60. color:#F3F3F3;text-decoration:none;font-weight:normal;
  61. background:#C00;
  62. }

  64. #nav li:hover ul {
  65. left: auto;
  66. }
  67. #nav li.sfhover ul {
  68. left: auto;
  69. }
  70. #content {
  71. clear: left;
  72. }


  75. -->
  76. </style>

  78. <script type=text/javascript><!--//--><![CDATA[//><!--
  79. function menuFix() {
  80. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  81. for (var i=0; i<sfEls.length; i++) {
  82.   sfEls[i].onmouseover=function() {
  83.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  84.   }
  85.   sfEls[i].onMouseDown=function() {
  86.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  87.   }
  88.   sfEls[i].onMouseUp=function() {
  89.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  90.   }
  91.   sfEls[i].onmouseout=function() {
  92.   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

  94. "");
  95.   }
  96. }
  97. }
  98. window.onload=menuFix;

  100. //--><!]]></script>

  102. </head>
  103. <body>


  106. <ul id="nav">
  107. <li><a href="#">产品介绍</a>
  108. <ul>
  109. <li><a href="#">产品一</a></li>
  110. <li><a href="#">产品一</a></li>
  111. <li><a href="#">产品一</a></li>
  112. <li><a href="#">产品一</a></li>
  113. <li><a href="#">产品一</a></li>
  114. <li><a href="#">产品一</a></li>
  115. </ul>
  116. </li>
  117. <li><a href="#">服务介绍</a>
  118. <ul>
  119. <li><a href="#">服务二</a></li>
  120. <li><a href="#">服务二</a></li>
  121. <li><a href="#">服务二</a></li>
  122. <li><a href="#">服务二服务二</a></li>
  123. <li><a href="#">服务二服务二服务二</a></li>
  124. <li><a href="#">服务二</a></li>
  125. </ul>
  126. </li>
  127. <li><a href="#">成功案例</a>
  128. <ul>
  129. <li><a href="#">案例三</a></li>
  130. <li><a href="#">案例</a></li>
  131. <li><a href="#">案例三案例三</a></li>
  132. <li><a href="#">案例三案例三案例三</a></li>
  133. </ul>
  134. </li>
  135. <li><a href="#">关于我们</a>
  136. <ul>
  137. <li><a href="#">我们四</a></li>
  138. <li><a href="#">我们四</a></li>
  139. <li><a href="#">我们四</a></li>
  140. <li><a href="#">我们四111</a></li>
  141. </ul>
  142. </li>

  144. <li><a href="#">在线演示</a>
  145. <ul>
  146. <li><a href="#">演示</a></li>
  147. <li><a href="#">演示</a></li>
  148. <li><a href="#">演示</a></li>
  149. <li><a href="#">演示演示演示</a></li>
  150. <li><a href="#">演示演示演示</a></li>
  151. <li><a href="#">演示演示</a></li>
  152. <li><a href="#">演示演示演示</a></li>
  153. <li><a href="#">演示演示演示演示演示</a></li>
  154. </ul>
  155. </li>
  156. <li><a href="#">联系我们</a>
  157. <ul>
  158. <li><a href="#">联系联系联系联系联系</a></li>
  159. <li><a href="#">联系联系联系</a></li>
  160. <li><a href="#">联系</a></li>
  161. <li><a href="#">联系联系</a></li>
  162. <li><a href="#">联系联系</a></li>
  163. <li><a href="#">联系联系联系</a></li>
  164. <li><a href="#">联系联系联系</a></li>
  165. </ul>
  166. </li>

  168. </ul>
  169. </body>
  170. </html>