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