?1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ?2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ?3 <html xmlns="http://www.w3.org/1999/xhtml"> ?4 <head> ?5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> ?6 <title>京东商城导航条</title> ?7 <style type="text/css"> ?8 .my_left_category{ ?9 width:150px; 10 font-size:12px; 11 font-family:arial,sans-serif; 12 letter-spacing:2px; 13 } 14 .my_left_category h1{ 15 background-image:url(images/spring_06.gif); 16 height:20px; 17 background-repeat:no-repeat; 18 font-size:14px; 19 font-weight:bold; 20 padding-left:15px; 21 padding-top:8px; 22 margin:0px; 23 color:#FFF; 24 } 25 .my_left_category .my_left_cat_list{ 26 width:148px; 27 border-color:#b60134; 28 border-style:solid; 29 border-width:0px 1px 1px 1px; 30 line-height:13.5pt; 31 } 32 .my_left_category .my_left_cat_list h2 { 33 margin:0px; 34 padding:3px 5px 0px 9px; 35 } 36 .my_left_category .my_left_cat_list h2 a { 37 color:#d6290b; 38 font-weight:bold; 39 font-size:14px; 40 line-height:22px; 41 } 42 .my_left_category .my_left_cat_list h2 a:hover { 43 color:#d6290b; 44 font-weight:bold; 45 font-size:14px; 46 line-height:22px; 47 } 48 .my_left_category .h2_cat{ 49 width:148px; 50 height:26px; ?51 background-image:url(images/my_menubg.gif); 52 background-repeat:no-repeat; ?53 line-height:26px; 54 font-weight:normal; 55 color:#333333; 56 position:relative; 57 } 58 .my_left_category .h2_cat_1{ 59 width:148px; 60 height:26px; ?61 background-image:url(images/my_menubg_1.gif); 62 background-repeat:no-repeat; ?63 line-height:26px; 64 font-weight:normal; 65 color:#333333; 66 position:relative; 67 } 68 .my_left_category a{ 69 font:12px; 70 text-decoration:none; 71 color:#333333; 72 } 73 .my_left_category a:hover{ 74 text-decoration:underline; 75 color:#ff3333; 76 } 77 .my_left_category h3{ 78 margin:0px; ?79 padding:0px; 80 height:26px; ?81 font-size:12px; ?82 font-weight:normal; 83 display:block; ?84 padding-left:8px; 85 } 86 .my_left_category h3 span{color:#999999; width:145px; float:right;} 87 .my_left_category h3 a{ line-height:26px;} 88 .my_left_category .h3_cat{ 89 display:none; 90 width:204px; 91 position:absolute; ?92 left:123px; ?93 margin-top:-26px; ?94 cursor:auto; 95 } 96 .my_left_category .shadow{ 97 position:inherit; 98 background:url(images/shadow_04.gif) left top; 99 width:204px;100 }101 .my_left_category .shadow_border{102 position:inherit; 103 width:200px; 104 border:1px solid #959595; margin-top:1px; 105 border-left-width:0px; 106 background:url(images/shadow_border.gif) no-repeat 0px 21px; 107 background-color:#ffffff; 108 margin-bottom:3px109 }110 .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}111 .my_left_category .shadow_border ul li {112 list-style:none;113 padding-left:10px;114 background-image:url(images/my_cat_sub_menu_dot.gif);115 background-repeat:no-repeat;116 background-position:0px 8px;117 float:left;118 width:75px;119 height:26px;120 overflow:hidden;121 letter-spacing:0px;122 } 123 .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}124 .my_left_category .active_cat h3 { font-weight:bold}125 .my_left_category .active_cat h3 span{ display:none;} 126 .my_left_category .active_cat div{display:block;} 127 </style>128 </head>129 <body>130 <div class="my_left_category">131 <h1>分类导航</h1>132 <div class="my_left_cat_list">133 <h2><a href="#">按网站类别</a></h2>134 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">135 <h3><a href="#">企业建站</a></h3>136 <div class="h3_cat">137 <div class="shadow">138 <div class="shadow_border">139 <ul>140 <li><a href="#">LOGO设计</a></li>141 <li><a href="#">网站设计</a></li>142 <li><a href="#">网站广告</a></li>143 <li><a href="#">推广</a></li>144 <li><a href="#">建网站</a></li>145 <li><a href="#">网站推广</a></li>146 <li><a href="#">网站建设</a></li>147 <li><a href="#">SEO</a></li>148 </ul>149 </div>150 </div>151 </div> 152 </div> 153 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">154 <h3><a href="#">韩国男装</a></h3>155 <div class="h3_cat">156 <div class="shadow">157 <div class="shadow_border">158 <ul>159 <li><a href="#">LOGO设计</a></li>160 <li><a href="#">网站设计</a></li>161 <li><a href="#">网站广告</a></li>162 <li><a href="#">推广</a></li>163 <li><a href="#">建网站</a></li>164 <li><a href="#">网站推广</a></li>165 <li><a href="#">网站建设</a></li>166 <li><a href="#">SEO</a></li>167 </ul>168 </div>169 </div> 170 </div> 171 </div> 172 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">173 <h3><a href="#">脚本之家</a></h3>174 <div class="h3_cat">175 <div class="shadow">176 <div class="shadow_border">177 <ul>178 <li><a href="#">LOGO设计</a></li>179 <li><a href="#">源码下载</a></li>180 <li><a href="#">最新更新</a></li>181 <li><a href="#">下载排行</a></li>182 <li><a href="#">ASP</a></li>183 <li><a href="#">PHP</a></li>184 <li><a href="#">AJAX</a></li>185 <li><a href="#">DELPHI</a></li>186 </ul>187 </div>188 </div> 189 </div> 190 </div> 191 <!-- again -->192 <h2><a href="#">按品牌选货</a></h2>193 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">194 <h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>195 <div class="h3_cat">196 <div class="shadow">197 <div class="shadow_border">198 <ul>199 <li><a href="#">LOGO设计</a></li>200 <li><a href="#">网站设计</a></li>201 <li><a href="#">网站广告</a></li>202 <li><a href="#">推广</a></li>203 <li><a href="#">建网站</a></li>204 <li><a href="#">网站推广</a></li>205 <li><a href="#">网站建设</a></li>206 <li><a href="#">SEO</a></li>207 </ul>208 </div>209 </div>210 </div> 211 </div> 212 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">213 <h3><a href="#">网站建设</a></h3>214 <div class="h3_cat">215 <div class="shadow">216 <div class="shadow_border">217 <ul>218 <li><a href="#">LOGO设计</a></li>219 <li><a href="#">网站设计</a></li>220 <li><a href="#">推广</a></li>221 <li><a href="#">建网站</a></li>222 <li><a href="#">网站推广</a></li>223 <li><a href="#">推广</a></li>224 <li><a href="#">LOGO设计</a></li>225 <li><a href="#">网站设计</a></li>226 <li><a href="#">网站广告</a></li>227 <li><a href="#">推广</a></li>228 <li><a href="#">建网站</a></li>229 <li><a href="#">网站推广</a></li>230 <li><a href="#">网站建设</a></li>231 <li><a href="#">LOGO设计</a></li>232 <li><a href="#">网站设计</a></li>233 <li><a href="#">网站建设</a></li>234 <li><a href="#">SEO</a></li>235 </ul>236 </div>237 </div> 238 </div> 239 </div> 240 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">241 <h3><a href="#">网站程序</a></h3>242 <div class="h3_cat">243 <div class="shadow">244 <div class="shadow_border">245 <ul>246 <li><a href="#">PHP</a></li>247 <li><a href="#">ASP</a></li>248 <li><a href="#">JSP</a></li>249 <li><a href="#">ASP.Net</a></li>250 </ul>251 </div>252 </div> 253 </div> 254 </div> 255 <div class="h2_cat_1" onmouseover="this.className=‘h2_cat_1 active_cat‘" onmouseout="this.className=‘h2_cat_1‘">256 <h3><a href="#">其他网站</a></h3>257 </div>258 <!-- again -->259 <h2><a href="#">按价格选货</a></h2>260 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">261 <h3><a href="#">低端价位</a></h3>262 <div class="h3_cat">263 <div class="shadow">264 <div class="shadow_border">265 <ul>266 <li><a href="#">50元以下</a></li>267 <li><a href="#">50-100元</a></li>268 </ul>269 </div>270 </div>271 </div> 272 </div> 273 <div class="h2_cat" onmouseover="this.className=‘h2_cat active_cat‘" onmouseout="this.className=‘h2_cat‘">274 <h3><a href="#">中高端价位</a></h3>275 <div class="h3_cat">276 <div class="shadow">277 <div class="shadow_border">278 <ul>279 <li><a href="#">100-150元</a></li>280 <li><a href="#">150-200元</a></li>281 <li><a href="#">200-300元</a></li>282 <li><a href="#">300元以上</a></li>283 </ul>284 </div>285 </div> 286 </div> 287 </div> 288 <!-- again -->289 <h2><a href="#">超值特价区</a></h2>290 <h2><a href="#">现货区</a></h2>291 <!--测试复制end--> 292 </div>293 </div> 294 </body>295 </html>DIV+CSS实现仿京东商城导航条效果
原文地址：https://www.cnblogs.com/zijue/p/9908572.html