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:3px
109 }
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>