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