1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>css菜单演示</title>
  5.  
  6.  
  7. <style type="text/css">
  8. <!--
  9.  
  10. *{margin:0;padding:0;border:0;}
  11. body {
  12. font-family: arial, 宋体, serif;
  13.         font-size:12px;
  14. }
  15.  
  16.  
  17. #nav {
  18.   line-height: 24px;  list-style-type: none; background:#666;
  19. }
  20.  
  21. #nav a {
  22. display: block; width: 80px; text-align:center;
  23. }
  24.  
  25. #nav a:link  {
  26. color:#666; text-decoration:none;
  27. }
  28. #nav a:visited  {
  29. color:#666;text-decoration:none;
  30. }
  31. #nav a:hover  {
  32. color:#FFF;text-decoration:none;font-weight:bold;
  33. }
  34.  
  35. #nav li {
  36. float: left; width: 80px; background:#CCC;
  37. }
  38. #nav li a:hover{
  39. background:#999;
  40. }
  41. #nav li ul {
  42. line-height: 27px;  list-style-type: none;text-align:left;
  43. left: -999em; width: 180px; position: absolute;
  44. }
  45. #nav li ul li{
  46. float: left; width: 180px;
  47. background: #F6F6F6;
  48. }
  49.  
  50.  
  51. #nav li ul a{
  52. display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
  53. }
  54.  
  55. #nav li ul a:link  {
  56. color:#666; text-decoration:none;
  57. }
  58. #nav li ul a:visited  {
  59. color:#666;text-decoration:none;
  60. }
  61. #nav li ul a:hover  {
  62. color:#F3F3F3;text-decoration:none;font-weight:normal;
  63. background:#C00;
  64. }
  65.  
  66. #nav li:hover ul {
  67. left: auto;
  68. }
  69. #nav li.sfhover ul {
  70. left: auto;
  71. }
  72. #content {
  73. clear: left;
  74. }
  75.  
  76.  
  77. -->
  78. </style>
  79.  
  80. <script type=text/javascript><!--//--><![CDATA[//><!--
  81. function menuFix() {
  82. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  83. for (var i=0; i<sfEls.length; i++) {
  84.   sfEls[i].onmouseover=function() {
  85.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  86.   }
  87.   sfEls[i].onMouseDown=function() {
  88.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  89.   }
  90.   sfEls[i].onMouseUp=function() {
  91.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  92.   }
  93.   sfEls[i].onmouseout=function() {
  94.   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  95.  
  96. "");
  97.   }
  98. }
  99. }
  100. window.onload=menuFix;
  101.  
  102. //--><!]]></script>
  103.  
  104. </head>
  105. <body>
  106.  
  107.  
  108. <ul id="nav">
  109. <li><a href="#">产品介绍</a>
  110.  <ul>
  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.  <li><a href="#">产品一</a></li>
  116.  <li><a href="#">产品一</a></li>
  117.  </ul>
  118. </li>
  119. <li><a href="#">服务介绍</a>
  120.  <ul>
  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.  <li><a href="#">服务二服务二服务二</a></li>
  126.  <li><a href="#">服务二</a></li>
  127.  </ul>
  128. </li>
  129. <li><a href="#">成功案例</a>
  130.  <ul>
  131.  <li><a href="#">案例三</a></li>
  132.  <li><a href="#">案例</a></li>
  133.  <li><a href="#">案例三案例三</a></li>
  134.  <li><a href="#">案例三案例三案例三</a></li>
  135.  </ul>
  136. </li>
  137. <li><a href="#">关于我们</a>
  138.  <ul>
  139.  <li><a href="#">我们四</a></li>
  140.  <li><a href="#">我们四</a></li>
  141.  <li><a href="#">我们四</a></li>
  142.  <li><a href="#">我们四111</a></li>
  143.  </ul>
  144. </li>
  145.  
  146. <li><a href="#">在线演示</a>
  147.  <ul>
  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.  <li><a href="#">演示演示演示</a></li>
  155.  <li><a href="#">演示演示演示演示演示</a></li>
  156.  </ul>
  157. </li>
  158. <li><a href="#">联系我们</a>
  159.  <ul>
  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.  <li><a href="#">联系联系联系</a></li>
  166.  <li><a href="#">联系联系联系</a></li>
  167.  </ul>
  168. </li>
  169.  
  170. </ul>
  171.  
  172. </body>
  173. </html>
  1. <html><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <title>css菜单演示</title>
  4.  
  5.  
  6. <style type="text/css">
  7. <!--
  8.  
  9. *{margin:0;padding:0;border:0;}
  10. body {
  11. font-family: arial, 宋体, serif;
  12.         font-size:12px;
  13. }
  14.  
  15.  
  16. #nav {
  17.   line-height: 24px;  list-style-type: none; background:#666;   width:80px;
  18. }
  19.  
  20. #nav a {
  21. display: block; width: 80px; text-align:center;
  22. }
  23.  
  24. #nav a:link  {
  25. color:#666; text-decoration:none;
  26. }
  27. #nav a:visited  {
  28. color:#666;text-decoration:none;
  29. }
  30. #nav a:hover  {
  31. color:#FFF;text-decoration:none;font-weight:bold;
  32. }
  33.  
  34. #nav li {
  35. /*float: left*/; width: 80px; background:#CCC;
  36. }
  37. #nav li a:hover{
  38. background:#999;
  39. }
  40. #nav li ul {
  41. line-height: 27px;  list-style-type: none;text-align:left;
  42. left: -999em; width: 180px; position: absolute;
  43. }
  44. #nav li ul li{
  45. float: left; width: 180px;
  46. background: #F6F6F6;
  47. }
  48.  
  49.  
  50. #nav li ul a{
  51. display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
  52. }
  53.  
  54. #nav li ul a:link  {
  55. color:#666; text-decoration:none;
  56. }
  57. #nav li ul a:visited  {
  58. color:#666;text-decoration:none;
  59. }
  60. #nav li ul a:hover  {
  61. color:#F3F3F3;text-decoration:none;font-weight:normal;
  62. background:#C00;
  63. }
  64.  
  65. #nav li:hover ul {
  66. left: auto;
  67. }
  68. #nav li.sfhover ul {
  69. left: auto;
  70. }
  71. #nav li.sfhover a {
  72. float:left;
  73. }
  74. #content {
  75. clear: left;
  76. }
  77.  
  78.  
  79. -->
  80. </style>
  81.  
  82. <script type=text/javascript><!--//--><![CDATA[//><!--
  83. function menuFix() {
  84. var sfEls = document.getElementById("nav").getElementsByTagName("li");
  85. for (var i=0; i<sfEls.length; i++) {
  86.   sfEls[i].onmouseover=function() {
  87.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  88.   }
  89.   sfEls[i].onMouseDown=function() {
  90.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  91.   }
  92.   sfEls[i].onMouseUp=function() {
  93.   this.className+=(this.className.length>0? " ": "") + "sfhover";
  94.   }
  95.   sfEls[i].onmouseout=function() {
  96.   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  97.  
  98. "");
  99.   }
  100. }
  101. }
  102. window.onload=menuFix;
  103.  
  104. //--><!]]></script>
  105.  
  106. </head>
  107. <body>
  108.  
  109.  
  110. <ul id="nav">
  111. <li><a href="#">产品介绍</a>
  112.  <ul>
  113.  <li><a href="#">产品一</a></li>
  114.  <li><a href="#">产品一</a></li>
  115.  <li><a href="#">产品一</a></li>
  116.  <li><a href="#">产品一</a></li>
  117.  <li><a href="#">产品一</a></li>
  118.  <li><a href="#">产品一</a></li>
  119.  </ul>
  120. </li>
  121. <li><a href="#">服务介绍</a>
  122.  <ul>
  123.  <li><a href="#">服务二</a></li>
  124.  <li><a href="#">服务二</a></li>
  125.  <li><a href="#">服务二</a></li>
  126.  <li><a href="#">服务二服务二</a></li>
  127.  <li><a href="#">服务二服务二服务二</a></li>
  128.  <li><a href="#">服务二</a></li>
  129.  </ul>
  130. </li>
  131. <li><a href="#">成功案例</a>
  132.  <ul>
  133.  <li><a href="#">案例三</a></li>
  134.  <li><a href="#">案例</a></li>
  135.  <li><a href="#">案例三案例三</a></li>
  136.  <li><a href="#">案例三案例三案例三</a></li>
  137.  </ul>
  138. </li>
  139. <li><a href="#">关于我们</a>
  140.  <ul>
  141.  <li><a href="#">我们四</a></li>
  142.  <li><a href="#">我们四</a></li>
  143.  <li><a href="#">我们四</a></li>
  144.  <li><a href="#">我们四111</a></li>
  145.  </ul>
  146. </li>
  147.  
  148. <li><a href="#">在线演示</a>
  149.  <ul>
  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.  <li><a href="#">演示演示演示</a></li>
  155.  <li><a href="#">演示演示</a></li>
  156.  <li><a href="#">演示演示演示</a></li>
  157.  <li><a href="#">演示演示演示演示演示</a></li>
  158.  </ul>
  159. </li>
  160. <li><a href="#">联系我们</a>
  161.  <ul>
  162.  <li><a href="#">联系联系联系联系联系</a></li>
  163.  <li><a href="#">联系联系联系</a></li>
  164.  <li><a href="#">联系</a></li>
  165.  <li><a href="#">联系联系</a></li>
  166.  <li><a href="#">联系联系</a></li>
  167.  <li><a href="#">联系联系联系</a></li>
  168.  <li><a href="#">联系联系联系</a></li>
  169.  </ul>
  170. </li>
  171.  
  172. </ul>
  173.  
  174. </body>
  175. </html>


无觅相关文章插件，快速提升流量