为什么这个hover没有生效

为什么这个hover没有生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕云游商城</title>
    <meta name="Keywords" content="慕云游,旅游,出行,酒店。">
    <meta name="Description" content="慕云游——十年旅游经验,为您提供优质省心的服务。">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
 
</head>
 
<body>
    <header class="site-header">
        <div class="top-bar">
            <div class="center-wrap">
                <nav class="shortcut-links">
                    <ul>
                        <li><a href="#">目的地</a></li>
                        <li><a href="#">锦囊</a></li>
                        <li class="have-menu">
                            <a href="#">社区</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu sqmenu">
                                <ul>
                                    <li><a href="#">旅行论坛</a></li>
                                    <li><a href="#">旅行专栏</a></li>
                                    <li><a href="#">旅行问答</a></li>
                                    <li><a href="#">旅行生活分享平台</a></li>
                                    <li><a href="#">JNE旅行生活美学</a></li>
                                    <li><a href="#">Biu伴(原结伴同游)</a></li>
                                    <li><a href="#">负责任的旅行</a></li>
                                    <li><a href="#">特别策划</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">行程助手</a></li>
                        <li class="have-menu">
                            <a href="#">商城</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu scmenu">
                                <ul>
                                    <li><a href="#">机酒自由行</a></li>
                                    <li><a href="#">当地玩乐</a></li>
                                    <li><a href="#">签证</a></li>
                                    <li><a href="#">保险</a></li>
                                    <li><a href="#">租车自驾</a></li>
                                    <li><a href="#">邮轮</a></li>
                                    <li><a href="#">河轮</a></li>
                                    <li><a href="#">私人定制</a></li>
                                    <li><a href="#">欧洲铁路</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="have-menu">
                            <a href="#">酒店·民宿</a>
                            <em class="arrow">
                                <i></i>
                                <b></b>
                            </em>
                            <div class="menu jdmenu">
                                <ul>
                                    <li><a href="#">酒店</a></li>
                                    <li><a href="#">爱彼迎</a></li>
                                    <li><a href="#">华人旅馆</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">特价酒店</a></li>
                    </ul>
                </nav>
                <div class="topbar-r">
                    <a href="#" class="iconfont">&#xe62d;</a>
                    <span>|</span>
                    <a href="#" class="iconfont">&#xe6b2;</a>
                    <a href="#" class="iconfont">&#xe62f;</a>
                    <a href="#" class="iconfont">&#xe62b;</a>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </div>
        </div>
        <nav class="main-nav">
            <div class="center-wrap">
                <ul>
                    <li class="have-menu">
                        <a href="#">机酒自由行</a>
                        <div class="menu jjzyxmenu">
                            <dl>
                                <dt>全部</dt>
                                <dd>
                                    <a href="#">自由行</a>
                                    <a href="#">优惠机票</a>
                                    <a href="#">酒店</a>
                                    <a href="#">邮轮</a>
                                    <a href="#">定制游</a>
                                    <a href="#">马尔代夫</a>
                                    <a href="#">海岛游</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">优惠机票</a></li>
                    <li class="have-menu">
                        <a href="#">跟团游</a>
                        <div class="menu gtymenu">
                            <dl>
                                <dt>全部</dt>
                                <dd>
                                    <a href="#">跟团游</a>
                                    <a href="#">半自助游</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">酒店</a></li>
                    <li class="have-menu">
                        <a href="#">当地玩乐</a>
                        <div class="menu ddwlmenu">
                            <dl>
                                <dt>全部</dt>
                                <dd>
                                    <a href="#">日游小团</a>
                                    <a href="#">深度体验</a>
                                    <a href="#">门票票券</a>
                                    <a href="#">餐饮美食</a>
                                    <a href="#">WIFI电话卡</a>
                                    <a href="#">购物</a>
                                    <a href="#">交通票券</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">签证</a></li>
                    <li><a href="#">游轮</a></li>
                    <li><a href="#">河轮</a></li>
                    <li><a href="#">保险</a></li>
                    <li><a href="#">租车自驾</a></li>
                    <li class="have-menu">
                        <a href="#">深度旅游</a>
                        <div class="menu sdlymenu">
                            <dl>
                                <dt>全部</dt>
                                <dd>
                                    <a href="#">CityWalk</a>
                                    <a href="#">特色长线</a>
                                    <a href="#">Q-Home</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">深度旅游私人定制</a></li>
                </ul>
            </div>
        </nav>
        <div class="header-con">
            <div class="center-wrap">
                <h1 class="logo">慕云游商城</h1>
                <div class="soso-box">
                    <input type="text" name="" id="" placeholder="酒店、旅游、出行">
                    <a href="#" class="btn iconfont">&#xe62d;</a>
                </div>
            </div>
        </div>
    </header>
    <!-- banner -->
    <section class="banner">
        <img src="images/banner1.jpg" alt="">
        <div class="center-wrap">
            <a href="#" class="left-btn btn"></a>
            <a href="#" class="right-btn btn"></a>
            <div class="banner-nav">
                <ul class="banner-nav-inner">
                    <li class="hot">
                        <dl>
                            <dt>热门出发地</dt>
                            <dd>
                                <em>北京</em>
                                <em>上海</em>
                                <em>广深</em>
                                <em>西南</em>
                                <em>国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="hk">
                        <dl>
                            <dt>港澳台 国内</dt>
                            <dd>
                                <em>香港</em>
                                <em>澳门</em>
                                <em>台湾</em>
                                <em>台湾国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="jp">
                        <dl>
                            <dt>日本 韩国</dt>
                            <dd>
                                <em>东京</em>
                                <em>大版</em>
                                <em>冲绳</em>
                                <em>北海道</em>
                                <em>福冈</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="sa">
                        <dl>
                            <dt>东南亚 南亚</dt>
                            <dd>
                                <em>泰国</em>
                                <em>新加坡</em>
                                <em>马来西亚</em>
                                <em>马尔代夫</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="eo">
                        <dl>
                            <dt>欧洲 美洲</dt>
                            <dd>
                                <em>英国</em>
                                <em>法国</em>
                                <em>美国</em>
                                <em>加拿大</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="ao">
                        <dl>
                            <dt>澳新 中东非</dt>
                            <dd>
                                <em>澳大利亚</em>
                                <em>新西兰</em>
                                <em>迪拜</em>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <div class="menus-box">
                    <div class="menu hkmenu">
                        <dl>
                            <dt>港澳台</dt>
                            <dd>
                                <a href="">香港</a>
                                <a href="">澳门</a>
                                <a href="">台北</a>
                                <a href="">高雄</a>
                                <a href="">香港迪士尼</a>
                                <a href="">香港海洋公园</a>
                                <a href="">交通接驳</a>
                                <a href="">澳门塔</a>
                                <a href="">新濠天地水舞间</a>
                                <a href="">澳门豪华自助</a>
                                <a href="">台北101</a>
                                <a href="">台湾美食</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu jpmenu">
                        <dl>
                            <dt>日本</dt>
                            <dd>
                                <a href="">东京</a>
                                <a href="">大阪</a>
                                <a href="">冲绳</a>
                                <a href="">北海道</a>
                                <a href="">札幌</a>
                                <a href="">京都</a>
                                <a href="">名古屋</a>
                                <a href="">福冈</a>
                                <a href="">长崎</a>
                                <a href="">鹿儿岛</a>
                                <a href="">JR Pass</a>
                                <a href="">米其林餐厅</a>
                                <a href="">东京迪士尼</a>
                                <a href="">大阪环球影城</a>
                                <a href="">冲绳一日游</a>
                                <a href="">City Walk</a>
                                <a href="">西瓜卡</a>
                                <a href="">京都日游</a>
                                <a href="">包车服务</a>
                                <a href="">富士山日游</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu samenu">
                        <dl>
                            <dt>泰新马</dt>
                            <dd>
                                <a href="">普吉岛</a>
                                <a href="">清迈</a>
                                <a href="">曼谷</a>
                                <a href="">苏梅岛</a>
                                <a href="">甲米</a>
                                <a href="">芭堤雅</a>
                                <a href="">拜县</a>
                                <a href="">新加坡</a>
                                <a href="">马来西亚</a>
                                <a href="">沙巴</a>
                                <a href="">吉隆坡</a>
                                <a href="">皇帝岛</a>
                                <a href="">泰国人妖</a>
                                <a href="">泰国丛林飞跃</a>
                                <a href="">泰国spa按摩</a>
                                <a href="">清迈夜间动物园</a>
                                <a href="">泰拳表演清莱一日游</a>
                                <a href="">新加坡环球影城</a>
                                <a href="">新加坡日游</a>
                                <a href="">新加坡滨海湾花园</a>
                                <a href="">沙巴美人鱼岛</a>
                                <a href="">沙巴红树林萤火虫</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>东南亚</dt>
                            <dd>
                                <a href="">巴厘岛</a>
                                <a href="">长滩岛</a>
                                <a href="">马尼拉</a>
                                <a href="">薄荷岛</a>
                                <a href="">美娜多芽庄</a>
                                <a href="">岘港</a>
                                <a href="">富国岛</a>
                                <a href="">柬埔寨</a>
                                <a href="">缅甸</a>
                                <a href="">老挝</a>
                                <a href="">文莱</a>
                                <a href="">蓝梦岛</a>
                                <a href="">巴厘岛SPA</a>
                                <a href="">网红漂浮下午茶</a>
                                <a href="">珍珠岛游乐园</a>
                                <a href="">富国岛浮潜海钓</a>
                                <a href="">吴哥窟</a>
                                <a href="">西哈努克</a>
                            </dd>
                        </dl>
                        <dl>
 
 
                            <dt>南亚 西亚</dt>
                            <dd>
                                <a href="">马尔代夫</a>
                                <a href="">斯里兰卡</a>
                                <a href="">印度</a>
                                <a href="">尼泊尔</a>
                                <a href="">格鲁吉亚阿塞拜疆</a>
                                <a href="">亚美尼亚</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu eomenu">
                        <dl>
                            <dt>欧洲</dt>
                            <dd>
                                <a href="">法国</a>
                                <a href="">意大利</a>
                                <a href="">土耳其</a>
                                <a href="">俄罗斯</a>
                                <a href="">西班牙</a>
                                <a href="">瑞士</a>
                                <a href="">英国</a>
                                <a href="">希腊</a>
                                <a href="">荷兰</a>
                                <a href="">德国</a>
                                <a href="">捷克</a>
                                <a href="">葡萄牙</a>
                                <a href="">奥地利</a>
                                <a href="">瑞典</a>
                                <a href="">丹麦</a>
                                <a href="">挪威</a>
                                <a href="">冰岛</a>
                                <a href="">芬兰</a>
                                <a href="">罗瓦涅米</a>
                                <a href="">奥斯陆</a>
                                <a href="">雷克雅未克</a>
                                <a href="">因特拉肯</a>
                                <a href="">巴塞罗那</a>
                                <a href="">伦敦</a>
                                <a href="">巴黎</a>
                                <a href="">塞纳河</a>
                                <a href="">慕尼黑</a>
                                <a href="">普罗旺斯</a>
                                <a href="">温莎日游</a>
                                <a href="">巴黎迪斯尼</a>
                                <a href="">伊斯坦布</a>
                                <a href="">尔阿尔罕布拉宫</a>
                                <a href="">唐顿庄园</a>
                                <a href="">埃菲尔铁塔</a>
                                <a href="">凡尔赛宫</a>
                                <a href="">北欧破冰船</a>
                                <a href="">极光之旅</a>
                                <a href="">英国天空岛</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>美洲</dt>
                            <dd>
                                <a href="">美国</a>
                                <a href="">加拿大</a>
                                <a href="">墨西哥</a>
                                <a href="">巴西</a>
                                <a href="">阿根廷</a>
                                <a href="">智利</a>
                                <a href="">秘鲁</a>
                                <a href="">玻利维亚</a>
                                <a href="">洛杉矶</a>
                                <a href="">纽约</a>
                                <a href="">拉斯维加斯</a>
                                <a href="">旧金山</a>
                                <a href="">圣地亚哥芝加哥</a>
                                <a href="">西雅图</a>
                                <a href="">华盛顿</a>
                                <a href="">奥兰多</a>
                                <a href="">夏威夷</a>
                                <a href="">塞班岛</a>
                                <a href="">关岛</a>
                                <a href="">环球影城</a>
                                <a href="">迪士尼</a>
                                <a href="">演出票</a>
                                <a href="">尼亚加拉大瀑布</a>
                                <a href="">帝国大厦</a>
                                <a href="">奥特莱斯</a>
                                <a href="">黄石国家公园</a>
                                <a href="">纽约大都会博物馆</a>
                                <a href="">美国大峡谷西峡</a>
                                <a href="">拉斯维加斯摩天轮</a>
                                <a href="">羚羊峡谷+马蹄湾</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu aomenu">
                        <dl>
                            <dt>
                                澳新 南太平洋
                            </dt>
                            <dd>
                                <a href="">迪拜</a>
                                <a href="">摩洛哥</a>
                                <a href="">毛里求斯</a>
                                <a href="">埃及</a>
                                <a href="">塞舌尔</a>
                                <a href="">马达加斯加</a>
                                <a href="">以色列</a>
                                <a href="">肯尼亚</a>
                                <a href="">南非</a>
                                <a href="">伊朗</a>
                                <a href="">约旦</a>
                                <a href="">突尼斯</a>
                                <a href="">迪拜</a>
                                <a href="">塔法拉利主题公园</a>
                                <a href="">迪拜七星帆船酒店用餐</a>
                                <a href="">夜游迪拜河</a>
                                <a href="">亚特兰蒂斯水上乐园</a>
                                <a href="">动物大迁徙</a>
                                <a href="">撒哈拉沙漠</a>
                                <a href="">金字塔</a>
                                <a href="">纳米比亚</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>中东非</dt>
                            <dd>
                                <a href="">迪拜</a>
                                <a href="">摩洛哥</a>
                                <a href="">毛里求斯</a>
                                <a href="">埃及</a>
                                <a href="">塞舌尔</a>
                                <a href="">马达加斯加</a>
                                <a href="">以色列</a>
                                <a href="">肯尼亚</a>
                                <a href="">南非</a>
                                <a href="">伊朗</a>
                                <a href="">约旦</a>
                                <a href="">突尼斯</a>
                                <a href="">迪拜</a>
                                <a href="">塔法拉利主题公园</a>
                                <a href="">迪拜七星帆船酒店用餐</a>
                                <a href="">夜游迪拜河</a>
                                <a href="">亚特兰蒂斯水上乐园</a>
                                <a href="">动物大迁徙</a>
                                <a href="">撒哈拉沙漠</a>
                                <a href="">金字塔</a>
                                <a href="">纳米比亚</a>
                            </dd>
                        </dl>
                    </div>
                </div>
 
            </div>
        </div>
        </div>
        </div>
        </nav>
    </section>
</body>
 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
/* 头部部分 */
 
.site-header {
    height150px;
    min-width1152px;
}
 
.site-header .top-bar {
    height32px;
    background-color#2A2A2A;
    line-height32px;
}
 
.site-header .top-bar .center-wrap .shortcut-links {
    floatleft;
    height32px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul {
    height32px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li {
    floatleft;
    margin-right18px;
    font-size14px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li:hover a {
    color#20BD9A;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu {
    padding-right14px;
    positionrelative;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .arrow {
    width12px;
    height12px;
    positionabsolute;
    top10px;
    right-2px;
    transition: transform 0.2s ease 0s;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu:hover .arrow {
    transform: rotate(180deg);
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .arrow i {
    positionabsolute;
    width6px;
    height6px;
    background-color#fff;
    top3px;
    left3px;
    transform: rotate(45deg);
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .arrow b {
    positionabsolute;
    width6px;
    height6px;
    background-color#2a2a2a;
    top1.5px;
    left3px;
    transform: rotate(45deg);
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .menu {
    positionabsolute;
    top30px;
    left0;
    background-color#fff;
    box-shadow: 0 4px 8px 0 rgba(0000.20);
    padding8px;
    displaynone;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu:hover .menu {
    displayblock;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .menu>ul>li {
    height18px;
    line-height18px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .menu>ul>li a {
    font-size12px;
    color#1C1F21;
    line-height18px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .sqmenu {
    width105px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .scmenu {
    width76px;
}
 
.site-header .top-bar .center-wrap .shortcut-links>ul>li.have-menu .jdmenu {
    width64px;
}
 
.site-header .top-bar .center-wrap .topbar-r {
    floatright;
    width225px;
}
 
.site-header .top-bar .center-wrap .topbar-r a,
.site-header .top-bar .center-wrap .topbar-r span {
    margin-right11px;
    font-size15px;
}
 
.site-header .top-bar .center-wrap .topbar-r span {
    color#fff;
}
 
.site-header .top-bar .center-wrap .topbar-r a:last-child {
    margin-right0;
}
 
.site-header .main-nav {
    height40px;
    background-color#20BD9A;
}
 
.site-header .main-nav .center-wrap>ul>li {
    floatleft;
    margin-right18px;
}
 
.site-header .main-nav ul li a {
    line-height40px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu {
    padding-right16px;
    positionrelative;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .menu {
    positionabsolute;
    top36px;
    left0;
    background-colorwhite;
    padding8px;
    box-shadow: 0 4px 8px 0 rgba(0000.20);
    displaynone;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu:hover .menu {
    displayblock;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .jjzyxmenu {
    width144px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .gtymenu {
    width106px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .ddwlmenu {
    width172px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .sdlymenu {
    width118px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .menu dl dt {
    font-size14px;
    color#1C1F21;
    /* line-height: 22px; */
    font-weightbold;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu .menu dl dd a {
    font-size12px;
    color#1C1F21;
    line-height20px;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu::after {
    positionabsolute;
    content'';
    width0;
    height0;
    border3px solid transparent;
    border-top-color#fff;
    border-bottomnone;
    /* 如果不去掉border-bottom三角形的旋转就会变得很丑陋,去掉border-bottom就会改变这个三角形的旋转中心 */
    top50%;
    margin-top-1px;
    right3px;
    transition: transform 0.2s ease 0s;
}
 
.site-header .main-nav .center-wrap>ul>li.have-menu:hover::after {
    transform: rotate(180deg);
}
 
.site-header .header-con {
    height36px;
    padding21px 0;
}
 
.site-header .header-con .logo {
    floatleft;
    width120px;
    height36px;
    font-size24px;
    color#20BD9A;
    font-weightbold;
    line-height36px;
    margin-right20px;
}
 
.site-header .header-con .soso-box {
    floatleft;
    width405px;
    height34px;
    padding-top2px;
}
 
.site-header .header-con .soso-box input {
    floatleft;
    width351px;
    height28px;
    border1px solid #20BD9A;
    outlinenone;
    padding-left10px;
    border-radius: 4px 0 0 4px;
}
 
.site-header .header-con .soso-box .btn {
    floatleft;
    width32px;
    height30px;
    background-color#20BD9A;
    border-radius: 0 4px 4px 0;
    text-aligncenter;
    line-height30px;
}
 
 
/* banner部分 */
 
.banner {
    positionrelative;
}
 
.banner img {
    width100%;
    min-width1152px;
    vertical-alignmiddle;
}
 
.banner .center-wrap {
    /* 只要有压盖,第一时间就要想到绝对定位 */
    positionabsolute;
    top0;
    left50%;
    min-width1152px;
    margin-left-576px;
    height100%;
}
 
.banner .center-wrap .banner-nav {
    height100%;
}
 
.banner .center-wrap .banner-nav>ul {
    height100%;
}
 
.banner .center-wrap .banner-nav>ul>li {
    width296px;
    height16.66%;
    background-color: rgba(000, .40);
    border-bottom1px solid #9e9e9e;
    box-sizing: border-box;
    positionrelative;
}
 
.banner .center-wrap .banner-nav>ul>li:hover {
    background-color: rgba(000, .63);
}
 
.banner .center-wrap .banner-nav>ul>li::before {
    content'';
    positionabsolute;
    left12px;
    top50%;
    margin-top-12px;
    width24px;
    height24px;
    background-imageurl(../images/icons.png);
}
 
.banner .center-wrap .banner-nav>ul>li.hot::before {
    background-position-29px -399px;
}
 
.banner .center-wrap .banner-nav>ul>li.hk::before {
    background-position-26px -217px;
}
 
.banner .center-wrap .banner-nav>ul>li.jp::before {
    background-position-25px -172px;
}
 
.banner .center-wrap .banner-nav>ul>li.sa::before {
    background-position-27px -263px;
}
 
.banner .center-wrap .banner-nav>ul>li.eo::before {
    background-position-29px -350px;
}
 
.banner .center-wrap .banner-nav>ul>li.ao::before {
    background-position-29px -306px;
}
 
.banner .center-wrap .btn {
    width32px;
    height44px;
    positionabsolute;
    top50%;
    margin-top-22px;
}
 
.banner .center-wrap .right-btn {
    right-42px;
    backgroundurl(../images/icons.png) no-repeat -21px -29px;
}
 
.banner .center-wrap .left-btn {
    left-42px;
    backgroundurl(../images/icons.png) no-repeat -21px -94px;
}
 
.banner .center-wrap .btn:hover {
    opacity: 0.8;
}
 
.banner .center-wrap .banner-nav>ul>li>dl {
    height48px;
    positionabsolute;
    top50%;
    left40px;
    margin-top-24px;
    color#fff;
}
 
.banner .center-wrap .banner-nav>ul>li>dl dt {
    height26px;
    line-height26px;
    font-size18px;
}
 
.banner .center-wrap .banner-nav>ul>li>dl dd {
    height22px;
    line-height22px;
    font-size14px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu {
    positionabsolute;
    left296px;
    top0;
    width356px;
    height100%;
    background-color: rgba(000, .63);
    padding16px;
    box-sizing: border-box;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dl {
    margin-bottom25px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dl dt {
    font-size16px;
    color#fff;
    line-height24px;
    margin-bottom4px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dl dd {
    line-height22px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dl dd a {
    font-size14px;
    margin-right10px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu {
    displaynone;
}
 
.banner .center-wrap .banner-nav>ul>li.hk:hover .banner .center-wrap .banner-nav .menus-box .menu.hkmenu {
    displayblock;
}

https://img1.sycdn.imooc.com//climg/62b1529509115a9608290148.jpg

为啥这个hover没有生效。

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,这里不需要写hover效果;没有出现小图标,是因为图片的路径写错了;修改参考如下:

https://img1.sycdn.imooc.com//climg/62b16195093516d904070196.jpg


祝学习愉快~

  • xcn_aaaa 提问者 #1

    我想要我鼠标经过一级菜单二级菜单就显示出来,但是这hover没有效果。

    https://img1.sycdn.imooc.com//climg/62b1529509115a9608290148.jpg

    2022-06-21 14:31:41
  • imooc_慕慕 回复 提问者 xcn_aaaa #2

    同学你好,从结构上来看,两者是同级,而不是父子关系或者包含关系,如下图所示:

    https://img1.sycdn.imooc.com//climg/62b17c400976256903250045.jpg

    所以使用hover是无效果的,思路为把下面的盒子放到上面的盒子里,然后使用hover效果;

    老师的代码实现是使用了js,所以结构上会有所不同;

    祝学习愉快~

    2022-06-21 16:10:11
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码