符合web标准的网页下拉菜单

  1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title>css菜单演示</title>
  5 <style type="text/css">
  6 
  7 *{margin:0;padding:0;border:0;}
  8 body {
  9     font-family: arial, 宋体, serif;
 10     font-size:12px;
 11 }
 12 #nav {
 13     text-align:center;
 14     line-height:24px;list-style-type:none;background:#666;
 15     margin-left:30px;
 16 }
 17 
 18 #nav a {
 19     display: block; width: 80px; text-align:center;
 20 }
 21 
 22 #nav a:link {
 23     color:#666666; text-decoration:none;
 24 }
 25 #nav a:visited {
 26     color:#666;text-decoration:none;
 27 }
 28 #nav a:hover {
 29     color:#CCCCCC;text-decoration:none;font-weight:bold;
 30 }
 31 
 32 #nav li {
 33     float: left; width: 80px; background:#00FFFF;
 34 }
 35 #nav li a:hover{
 36     background:#999;
 37 }
 38 #nav li ul {
 39     line-height:27px;list-style-type:none;text-align:left;
 40     left:-999em;width:80px; position: absolute;
 41     margin-left:-40px;
 42 }
 43 #nav li ul li{
 44     float:left;width:80px;background: #F6F6F6;
 45 }
 46 #nav li ul a{
 47     display:block;width:80px;text-align:left;padding-left:24px;
 48 }
 49 
 50 #nav li ul a:link {
 51     color:#666; text-decoration:none;
 52 }
 53 #nav li ul a:visited {
 54     color:#666;text-decoration:none;
 55 }
 56 #nav li ul a:hover {
 57     color:#F3F3F3;text-decoration:none;font-weight:normal;
 58     background:#ccc;
 59 }
 60 
 61 #nav li:hover ul {
 62     left: auto;
 63 }
 64 #nav li.sfhover ul {
 65     left: auto;
 66 }
 67 #content {
 68     clear: left;
 69 }
 70 
 71 </style>
 72 
 73 <script type=text/javascript>
 74 function menuFix() {
 75     var elems = document.getElementById("nav").getElementsByTagName("li");
 76     for (var i=0; i<elems.length; i++) {
 77         elems[i].onmouseover = function() {
 78             this.className += (this.className.length>0? " ": "") + "sfhover";
 79         }
 80         elems[i].onMouseDown = function() {
 81             this.className += (this.className.length>0? " ": "") + "sfhover";
 82         }
 83         elems[i].onMouseUp = function() {
 84             this.className += (this.className.length>0? " ": "") + "sfhover";
 85         }
 86         elems[i].onmouseout = function() {
 87             this.className = this.className.replace(new RegExp("( ?|^)sfhover\b"),"");
 88         }
 89     }
 90 }
 91 window.onload=menuFix;
 92 </script>
 93 
 94 </head>
 95 <body>
 96     <ul id="nav">
 97         <li><a href="#">下拉菜单</a>
 98             <ul>
 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                 <li><a href="#">下拉菜单</a></li>
105             </ul>
106         </li>
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     </ul>
118 </body>
119 </html>