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>