效果预览：http://hovertree.com/code/texiao/ks63r6aq.htm
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title> 5 <style> 6 #top { 7 display: block; 8 text-align: left; 9 height: 105px; 10 position: relative; 11 z-index: 0; 12 } 13 14 .m { 15 margin: 0 auto; 16 width: 970px; 17 } 18 19 body { 20 font-size: 12px; 21 } 22 23 a { 24 color: #333; 25 text-decoration: none; 26 } 27 28 a:link { 29 text-decoration: none; 30 } 31 /* Download by http://hovertree.com*/ 32 a.blue:link, a.blue:visited { 33 color: #014cc9; 34 text-decoration: none; 35 } 36 37 a.blue:hover, a.blue:active { 38 color: #014cc9; 39 text-decoration: underline; 40 } 41 42 a.org:link, a.org:visited { 43 color: #ff4e00; 44 text-decoration: none; 45 } 46 47 a:hover, a:active, a.org:hover, a.org:active { 48 color: #ff4e00; 49 text-decoration: underline; 50 } 51 52 #navpart { 53 background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top; 54 height: 105px; 55 width: 950px; 56 z-index: 0; 57 margin-top: 0; 58 margin-right: auto; 59 margin-bottom: 0; 60 margin-left: auto; 61 clear: both; 62 position: relative; 63 } 64 65 #navpart .sideleft { 66 background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom; 67 float: left; 68 height: 105px; 69 width: 6px; 70 } 71 72 #navpart .sideright { 73 background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom; 74 float: right; 75 height: 105px; 76 width: 6px; 77 } 78 79 #navmenubar { 80 height: 32px; 81 float: left; 82 display: inline; 83 margin: 0 -6px; 84 width: 100%; 85 position: relative; 86 z-index: 3; 87 top: 0; 88 } 89 90 #hot { 91 background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top; 92 height: 21px; 93 width: 19px; 94 position: absolute; 95 top: -5px; 96 right: 2px; 97 z-index: 666; 98 background:black; 99 }100 101 #navmenubar .sideleft {102 background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;103 float: left;104 height: 32px;105 width: 6px;106 display: inline;107 margin: 0 0 0 8px;108 }109 110 #navmenubar .sideright {111 background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;112 float: left;113 height: 32px;114 width: 6px;115 display: inline;116 margin: 0 4px 0 -2px;117 }118 /* NAVMENU */119 #navmenubar .navmenu {120 background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;121 height: 32px;122 padding: 0;123 margin: 0;124 float: left;125 display: inline;126 }127 128 #navmenubar .navmenu li {129 float: left;130 white-space: nowrap;131 margin: 0px;132 padding: 0px;133 display: inline;134 }135 136 #navmenubar .navmenu li a {137 background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;138 width: 80px;139 padding: 7px 2px 5px 0;140 float: left;141 line-height: 20px;142 height: 20px;143 text-align: center;144 }145 146 #navmenubar .navmenu li a:hover {147 background-position: 0 -32px;148 color: #602800;149 text-decoration: none;150 padding: 8px 2px 4px 0;151 }152 153 #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {154 background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;155 font-weight: 600;156 color: #FFF;157 font-size: 14px;158 padding: 7px 2px 5px 0;159 }160 161 #top #navpart .content {162 margin-top: 40px;163 margin-right: auto;164 margin-bottom: 0px;165 margin-left: auto;166 width: 900px;167 height: auto;168 color: white;169 }170 171 #top #navpart .content a {172 color: white;173 display: inline-block;174 margin-top: 0px;175 height: 30px;176 border: 0px solid white;177 line-height: 30px;178 padding: 10px;179 }180 181 .clear {182 clear: both;183 display: block;184 font: 0px/0 sans-serif;185 height: 0px;186 overflow: hidden;187 }188 </style>189 190 </head>191 <body>192 <div id="top" class="m">193 <div id="navpart">194 <div class="sideleft"></div>195 <div class="sideright"></div>196 <!--NavMenu-->197 <div id="navmenubar">198 <div class="sideleft"></div>199 <ul class="navmenu">200 <li class="current"><a href="http://hovertree.com" target="_top" title="首页">何问起</a></li>201 <li><a href="http://hovertree.com/"><span>编程资源</span></a></li>202 <li><a href="http://hovertree.com"><span>高质量源码</span></a></li>203 </ul>204 <div class="sideright"></div>205 <div class="sideleft"></div>206 <ul class="navmenu">207 <li><a href="http://tool.hovertree.com"><span>工具</span></a></li>208 <li><a href="http://hovertree.com/code/"><span>代码</span></a></li>209 <li><a href="http://keleyi.com"><span>jQuery教程</span></a></li>210 <li><a href="http://hovertree.com/tiku/"><span>在线题库</span></a></li>211 </ul>212 <div class="sideright"></div>213 <div>214 <div class="content">215 <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS运算符优先级</a>216 <a href="http://hovertree.com/code/texiao/ks63r6aq.htm" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正则表达式</a>217 <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS风格</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js实现异步循环</a>218 219 </div>220 </div>221 </div>222 </div>223 </div>224 <div class="clear"></div>225 </body>226 </html>227 228 网页特效：
