1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css二级菜单演示</title> 6 <style type="text/css"> 7 <!-- 8 * { 9 margin:0; 10 padding:0; 11 border:0; 12 } 13 body { 14 font-family: arial, 宋体, serif; 15 font-size:12px; 16 } 17 #nav { 18 line-height: 24px; 19 list-style-type: none; 20 background:#666; 21 } 22 #nav a { 23 display: block; 24 width: 80px; 25 text-align:center; 26 } 27 #nav a:link { 28 color:#666; 29 text-decoration:none; 30 } 31 #nav a:visited { 32 color:#666; 33 text-decoration:none; 34 } 35 #nav a:hover { 36 color:#FFF; 37 text-decoration:none; 38 font-weight:bold; 39 } 40 #nav li { 41 float: left; 42 width: 80px; 43 background:#CCC; 44 } 45 #nav li a:hover { 46 background:#999; 47 } 48 #nav li ul { 49 line-height: 27px; 50 list-style-type: none; 51 text-align:left; 52 left: -999em; 53 width: 80px; 54 position: absolute; 55 } 56 #nav li ul li { 57 float: left; 58 width: 80px; 59 background: #F6F6F6; 60 } 61 #nav li ul a { 62 display: block; 63 width: 80px; 64 text-align:center 65 } 66 #nav li ul a:link { 67 color:#666; 68 text-decoration:none; 69 } 70 #nav li ul a:visited { 71 color:#666; 72 text-decoration:none; 73 } 74 #nav li ul a:hover { 75 color:#F3F3F3; 76 text-decoration:none; 77 font-weight:normal; 78 background:#C00; 79 } 80 #nav li:hover ul { 81 left: auto; 82 } 83 #nav li.sfhover ul { 84 left: auto; 85 } 86 #content { 87 clear: left; 88 } 89 --> 90 </style> 91 <script type=text/javascript> 92 <!--//--><![CDATA[//><!-- 93 function menuFix() { 94 var sfEls = document.getElementById("nav").getElementsByTagName("li"); 95 for (var i=0; i<sfEls.length; i++) { 96 sfEls[i].onmouseover=function() { 97 this.className+=(this.className.length>0? " ": "") + "sfhover"; 98 } 99 sfEls[i].onMouseDown=function() { 100 this.className+=(this.className.length>0? " ": "") + "sfhover"; 101 } 102 sfEls[i].onMouseUp=function() { 103 this.className+=(this.className.length>0? " ": "") + "sfhover"; 104 } 105 sfEls[i].onmouseout=function() { 106 this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),""); 107 } 108 } 109 } 110 window.onload=menuFix; 111 //--><!]]> 112 </script> 113 </head> 114 <body> 115 <ul id="nav"> 116 <li> 117 <a href="#">新浪</a> 118 <ul> 119 <li> 120 <a href="#">新浪新闻</a> 121 </li> 122 <li> 123 <a href="#">新浪体育</a> 124 </li> 125 <li> 126 <a href="#">新浪汽车</a> 127 </li> 128 <li> 129 <a href="#">新浪微博</a> 130 </li> 131 <li> 132 <a href="#">新浪科技</a> 133 </li> 134 </ul> 135 </li> 136 <li> 137 <a href="#">新浪</a> 138 <ul> 139 <li> 140 <a href="#">新浪新闻</a> 141 </li> 142 <li> 143 <a href="#">新浪体育</a> 144 </li> 145 <li> 146 <a href="#">新浪汽车</a> 147 </li> 148 <li> 149 <a href="#">新浪微博</a> 150 </li> 151 <li> 152 <a href="#">新浪科技</a> 153 </li> 154 </ul> 155 </li> 156 </ul> 157 </body> 158 </html>