效果体验：http://keleyi.com/keleyi/phtml/divcss/6.htm
兼容多浏览器，例如IE，Chrome，火狐 等。
完整代码,保存到htm文件打开也可以查看效果：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>20个web2.0导航样式-柯乐义</title> 6 <link href="http://keleyi.com/keleyi/phtml/divcss/6/navigation.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 10 <!------- 导航1 -------> 11 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo1.jpg" alt="wenqi's blog" /></div> 12 <div class="menu1"> 13 <a href="#">Blog</a> 14 <a href="#">Themes</a> 15 <a href="#">Service</a> 16 <a href="#">About</a> 17 <a href="#">Help</a> 18 <del></del> 19 </div> 20 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo2.jpg" alt="wenqi's blog" /></div> 21 22 <!------- 导航2 -------> 23 <div class="menu2"> 24 <div class="left2"></div> 25 <div class="center2"> 26 <a href="#">Blog</a> 27 <a href="#">Themes</a> 28 <a href="#">Service</a> 29 <a href="#">About</a> 30 <a href="#">Help</a> 31 <del></del> 32 </div> 33 <div class="right2"></div> 34 <div class="clear"></div> 35 </div> 36 37 <!------- 导航3 -------> 38 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo3.jpg" alt="wenqi's blog" /></div> 39 <div class="menu3"> 40 <div class="left3"></div> 41 <div class="center3"> 42 <a href="#">Blog</a> 43 <a href="#">Books</a> 44 <a href="#">Portfolio</a> 45 <a href="#">Photos</a> 46 <a href="#">Service</a> 47 </div> 48 <div class="right3"></div> 49 <div class="clear"></div> 50 </div> 51 52 <!------- 导航4 -------> 53 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo4.jpg" alt="WQ's space" /></div> 54 <div class="menu4"> 55 <a href="#">Blog</a> 56 <a href="#">Themes</a> 57 <a href="#">Service</a> 58 <a href="#">About</a> 59 <a href="#">Help</a> 60 <del></del> 61 </div> 62 63 <!------- 导航4 -------> 64 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo5.jpg" alt="wenqi's space" /></div> 65 <div class="menu5"> 66 <a href="#">Blog</a> 67 <a href="#">Themes</a> 68 <a href="#">Service</a> 69 <a href="#">About</a> 70 <del></del> 71 </div> 72 73 <!------- 导航6 -------> 74 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo6.jpg" alt="wenqi's blog" /></div> 75 <div class="menu6"> 76 <div class="left6"></div> 77 <div class="center6"> 78 <a href="#">Blog</a><span></span> 79 <a href="#">Themes</a><span></span> 80 <a href="#">Service</a><span></span> 81 <a href="#">About</a><span></span> 82 <a href="#">Help</a> 83 </div> 84 <div class="right6"></div> 85 <div class="clear"></div> 86 </div> 87 88 <!------- 导航7 -------> 89 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo7.jpg" alt="wenqi's blog" /></div> 90 <div class="menu7"> 91 <div class="left7"></div> 92 <div class="center7"> 93 <a href="#">Blog</a> 94 <a href="#">Themes</a> 95 <a href="#">Service</a> 96 <a href="#">About</a> 97 <a href="#">Help</a> 98 </div> 99 <div class="right7"></div> 100 <div class="clear"></div> 101 </div> 102 103 <!------- 导航8 -------> 104 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo8.jpg" alt="wenqi blog" /></div> 105 <div class="menu8"> 106 <a href="#">Blog</a> 107 <a href="#">Themes</a> 108 <a href="#">Service</a> 109 <a href="#">About</a> 110 <del></del> 111 </div> 112 113 <!------- 导航9 -------> 114 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo9.jpg" alt="wenqi blog" /></div> 115 <div class="menu9"> 116 <a href="#">Blog</a> 117 <a href="#">Themes</a> 118 <a href="#">Uploads</a> 119 <a href="#">Service</a> 120 <a href="#">About</a> 121 <del></del> 122 </div> 123 124 <!------- 导航10 -------> 125 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo10.jpg" alt="wenqi's blog" /></div> 126 <div class="menu10"> 127 <div class="left10"></div> 128 <div class="center10"> 129 <a href="http://keleyi.com">Blog</a> 130 <a href="#">Themes</a> 131 <a href="#">Service</a> 132 <a href="#">About</a> 133 <a href="http://keleyi.com/a/bjac/182di68b.htm">原文</a> 134 </div> 135 <div class="right10"></div> 136 <div class="clear"></div> 137 </div> 138 139 <!------- 导航11 -------> 140 <div class="top11"><a href="#">keleyi.com</a><del></del></div> 141 <div class="menu11"> 142 <div> 143 <a href="#">Blog</a> 144 <a href="#">Themes</a> 145 <a href="#">Uploads</a> 146 <a href="#">Service</a> 147 <a href="#">About</a> 148 <del></del> 149 </div> 150 </div> 151 <div style="margin-bottom:30px;"><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo11.jpg" alt="wenqi blog" /></div> 152 153 <!------- 导航12 -------> 154 <div class="box12"> 155 <div class="menu12"> 156 <div class="left12"></div> 157 <div class="center12"> 158 <a href="#">Blog</a> 159 <a href="http://keleyi.com">Themes</a> 160 <a href="#">Service</a> 161 <a href="#">About</a> 162 <del></del> 163 </div> 164 <div class="right12"></div> 165 <div class="clear"></div> 166 </div> 167 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo12.jpg" alt="wenqi blog" /></div> 168 </div> 169 170 <!------- 导航13 -------> 171 <div class="box13"> 172 <div class="logo13"></div> 173 <div class="menu13"> 174 <div> 175 <a href="#">Blog</a> 176 <a href="#">Themes</a> 177 <a href="#">Service</a> 178 <a href="#">About</a> 179 <del></del> 180 </div> 181 </div> 182 <div class="top13"></div> 183 </div> 184 185 <!------- 导航14 -------> 186 <div class="box14"> 187 <div class="top14"> 188 <a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del> 189 </div> 190 <div class="menu14"> 191 <label></label><span></span> 192 <a href="#">Blog</a><span></span> 193 <a href="#">Gallery</a><span></span> 194 <a href="#">Themes</a><span></span> 195 <a href="#">Service</a><span></span> 196 <a href="http://keleyi.com">About</a> 197 <del></del> 198 </div> 199 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div> 200 </div> 201 202 <!------- 导航15 -------> 203 <div class="box15"> 204 <div class="left15"></div> 205 <div class="menu15"> 206 <a href="#">Blog</a><span></span> 207 <a href="#">Gallery</a><span></span> 208 <a href="#">Service</a><span></span> 209 <a href="#">About</a> 210 <del></del> 211 </div> 212 <div class="clear"></div> 213 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div> 214 </div> 215 216 <!------- 导航16 -------> 217 <div class="menu16"> 218 <a href="#">Blog</a> 219 <a href="#">Themes</a> 220 <a href="#">Uploads</a> 221 <a href="#">Service</a> 222 <a href="#">About</a> 223 <del></del> 224 </div> 225 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div> 226 227 <!------- 导航17 -------> 228 <div class="top17"> 229 <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del> 230 </div> 231 <div class="menu17"> 232 <a href="#">Blog</a> 233 <a href="#">Gallery</a> 234 <a href="#">Service</a> 235 <a href="#">Works</a> 236 <a href="#">About</a> 237 <del></del> 238 </div> 239 240 <!------- 导航18 -------> 241 <div class="box18"> 242 <div class="top18"></div> 243 <div class="menu18"> 244 <a href="http://keleyi.com" class="a1">Blog</a> 245 <a href="#" class="a2">Gallery</a> 246 <a href="#" class="a3">Service</a> 247 <a href="#" class="a4">About</a> 248 <del></del> 249 </div> 250 </div> 251 252 <!------- 导航19 -------> 253 <div class="top19"> 254 <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a> 255 </div> 256 <div class="menu19"> 257 <a href="#">Blog</a> 258 <a href="#">Gallery</a> 259 <a href="#">Service</a> 260 <a href="#">Works</a> 261 <a href="#">About</a> 262 <del></del> 263 </div> 264 <div class="bottom19"></div> 265 266 <!------- 导航20 -------> 267 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo20.jpg" alt="wenqi's blog" /></div> 268 <div class="menu20"> 269 <a href="http://keleyi.com/menu/net/" class="a1">Blog</a> 270 <a href="http://keleyi.com/menu/javascript/" class="a2">Gallery</a> 271 <a href="http://keleyi.com/menu/jquery/" class="a3">Service</a> 272 <a href="http://keleyi.com/menu/webqd/" class="a4">Works</a> 273 <del></del> 274 </div> 275 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div> 276 277 </body> 278 </html>