一种标准的网页下拉菜单 

  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;w\idth: 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>

 

posted @ 2014-04-24 10:42  追逐者——Eagle  阅读(181)  评论(0)    收藏  举报