下拉菜单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
|
<header class="header"> <div class="header_left"> <img src="img/logo.jpg"> </div> <div class="header_right"> <div class="number_right"> <img src="img/number.jpg"> </div> <ul> <a href="#"><li>首页</li></a> <a href="#"><li class="show_list"> <span>成功案例</span> <ul class="move_list"> <li>品牌设计</li> <li>网页设计</li> <li>平面设计</li> <li>电子商城</li> <li>空间/建筑</li> </ul> </li></a> <a href="#"><li>我要设计</li></a> <a href="#"><li>在线咨询</li></a> <a href="#"><li>会员注册</li></a> <a href="#"><li>会员登录</li></a> </ul> </div> </header> |
下拉菜单CSS代码
|
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
|
.header{ height: 120px; width: 1046px; margin: 0 auto;}.header_left{ float: left; line-height: 120px;}.header_left img{ width: 300px; height: 100px;}.header_right{ float: right; height: 120px; position: relative;}.header_right>div{ position: absolute; top: 0; right: 0;}.header_right ul{ margin-top: 88px;}.header_right ul a li{ border-right: 1px solid #000000; height: 13px; font-size: 15px; padding: 0 25px; font-weight: bold; color: #666;}.header_right ul a{ float: left; line-height: 13px;}.header_right ul a li:hover{ color: #000000;}.header_right ul a:last-child li{/*去@ www.xuepai.net掉最后的边框*/ border: none;}.show_list{ position: relative;}.show_list .move_list{ display: none; z-index: 103; position: absolute; top: -56px; left: 0; width: 100%; background: #333; text-align: center;}.show_list .move_list li{ padding: 10px 0; width: 114px; color: #fff;}.header_right ul a .show_list{ padding-bottom: 20px; border-right: none;}.show_list:hover .move_list{ display: block;}.header_right ul a:nth-child(3){ border-left: 1px solid #000;}.show_list .move_list li:hover{ color: white; background: orange;} |
在写完上述代码的@ www.haoshilao.net同时须加上css的重置代码，代码如下：
|
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
|
* { margin: 0; padding: 0}em,i { font-style: normal}li { list-style: none}a{ font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow; letter-spacing: 1.2px; color: #666; text-decoration: none}a:hover { color: #c81623 ;}img { border: 0; vertical-align: middle}input{ outline: none;}button { cursor: pointer; border:none; outline: none;} |