效果预览：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