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" lang="zh-CN">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>符合WEB标准的下拉导航菜单(CSS菜单)演示</title>
6![](/Images/OutliningIndicators/None.gif)
7
<style type="text/css">
8![](/Images/OutliningIndicators/InBlock.gif)
9
*{margin:0;padding:0;border:0;}
10
body {
11
font-family: arial, 宋体, serif;
12
font-size:12px;
13
}
14![](/Images/OutliningIndicators/InBlock.gif)
15
#nav {
16
line-height: 24px; list-style-type: none; background:#666;
17
}
18
#nav a {
19
display: block; width: 80px; text-align:center;
20
}
21
#nav a:link {
22
color:#666; text-decoration:none;
23
}
24
#nav a:visited {
25
color:#666;text-decoration:none;
26
}
27
#nav a:hover {
28
color:#FFF;text-decoration:none;font-weight:bold;
29
}
30
#nav li {
31
float: left; width: 80px; background:#CCC;
32
}
33
#nav li a:hover{
34
background:#999;
35
}
36
#nav li ul {
37
line-height: 27px; list-style-type: none;text-align:left;
38
left: -999em; width: 180px; position: absolute;
39
}
40
#nav li ul li{
41
float: left; width: 180px;
42
background: #F6F6F6;
43
}
44![](/Images/OutliningIndicators/InBlock.gif)
45
#nav li ul a{
46
display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
47
}
48
#nav li ul a:link {
49
color:#666; text-decoration:none;
50
}
51
#nav li ul a:visited {
52
color:#666;text-decoration:none;
53
}
54
#nav li ul a:hover {
55
color:#F3F3F3;text-decoration:none;font-weight:normal;
56
background:#C00;
57
}
58
#nav li:hover ul {
59
left: auto;
60
}
61
#nav li.sfhover ul {
62
left: auto;
63
}
64
#content {
65
clear: left;
66
}
67![](/Images/OutliningIndicators/InBlock.gif)
68
-->
69
</style>
70![](/Images/OutliningIndicators/None.gif)
71
<script type=text/javascript><!--//--><![CDATA[//>
72![](/Images/OutliningIndicators/InBlock.gif)
73
function menuFix() {
74
var sfEls = document.getElementById("nav").getElementsByTagName("li");
75
for (var i=0; i<sfEls.length; i++) {
76
sfEls[i].onmouseover=function(){
77
this.className+=(this.className.length>0? " ": "") + "sfhover";
78
}
79
sfEls[i].onMouseDown=function() {
80
this.className+=(this.className.length>0? " ": "") + "sfhover";
81
}
82
sfEls[i].onMouseUp=function() {
83
this.className+=(this.className.length>0? " ": "") + "sfhover";
84
}
85
sfEls[i].onmouseout=function() {
86
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
87
}
88
}
89
}
90
window.onload=menuFix;
91![](/Images/OutliningIndicators/InBlock.gif)
92
//--><!]]></script>
93
</head>
94
<body>
95
<br />
96
<br />
97
<br />
98
<br />
99
<br />
100
<br />
101
<br />
102
<ul id="nav">
103![](/Images/OutliningIndicators/InBlock.gif)
104
<li><a href="#" class="sfhover">产品介绍</a>
105
<ul>
106
<li><a href="#">产品一</a></li>
107
<li><a href="#">产品一</a></li>
108
<li><a href="#">产品一</a></li>
109
<li><a href="#">产品一</a></li>
110
<li><a href="#">产品一</a></li>
111
<li><a href="#">产品一</a></li>
112
</ul>
113
</li>
114![](/Images/OutliningIndicators/InBlock.gif)
115
<li><a href="#">服务介绍</a>
116
<ul>
117
<li><a href="#">服务二</a></li>
118
<li><a href="#">服务二</a></li>
119
<li><a href="#">服务二</a></li>
120
<li><a href="#">服务二服务二</a></li>
121
<li><a href="#">服务二服务二服务二</a></li>
122
<li><a href="#">服务二</a></li>
123
</ul>
124
</li>
125![](/Images/OutliningIndicators/InBlock.gif)
126
<li><a href="#">成功案例</a>
127
<ul>
128
<li><a href="#">案例三</a></li>
129
<li><a href="#">案例</a></li>
130
<li><a href="#">案例三案例三</a></li>
131
<li><a href="#">案例三案例三案例三</a></li>
132
</ul>
133
</li>
134![](/Images/OutliningIndicators/InBlock.gif)
135
<li><a href="#">关于我们</a>
136
<ul>
137
<li><a href="#">我们四</a></li>
138
<li><a href="#">我们四</a></li>
139
<li><a href="#">我们四</a></li>
140
<li><a href="#">我们四111</a></li>
141
</ul>
142
</li>
143![](/Images/OutliningIndicators/InBlock.gif)
144
<li><a href="#">在线演示</a>
145
<ul>
146
<li><a href="#">演示</a></li>
147
<li><a href="#">演示</a></li>
148
<li><a href="#">演示</a></li>
149
<li><a href="#">演示演示演示</a></li>
150
<li><a href="#">演示演示演示</a></li>
151
<li><a href="#">演示演示</a></li>
152
<li><a href="#">演示演示演示</a></li>
153
<li><a href="#">演示演示演示演示演示</a></li>
154
</ul>
155
</li>
156![](/Images/OutliningIndicators/InBlock.gif)
157
<li><a href="#">联系我们</a>
158
<ul>
159
<li><a href="#">联系联系联系联系联系</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
</ul>
167
</li>
168
</ul>
169
</body>
170
</html>
171![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
24
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
54
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
58
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
61
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
64
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
69
![](/Images/OutliningIndicators/None.gif)
70
![](/Images/OutliningIndicators/None.gif)
71
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
76
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
82
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
85
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
88
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
89
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
90
![](/Images/OutliningIndicators/InBlock.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/InBlock.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/InBlock.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/InBlock.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/InBlock.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/InBlock.gif)
115
![](/Images/OutliningIndicators/InBlock.gif)
116
![](/Images/OutliningIndicators/InBlock.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/InBlock.gif)
124
![](/Images/OutliningIndicators/InBlock.gif)
125
![](/Images/OutliningIndicators/InBlock.gif)
126
![](/Images/OutliningIndicators/InBlock.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/InBlock.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/InBlock.gif)
137
![](/Images/OutliningIndicators/InBlock.gif)
138
![](/Images/OutliningIndicators/InBlock.gif)
139
![](/Images/OutliningIndicators/InBlock.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/InBlock.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/InBlock.gif)
152
![](/Images/OutliningIndicators/InBlock.gif)
153
![](/Images/OutliningIndicators/InBlock.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/InBlock.gif)
156
![](/Images/OutliningIndicators/InBlock.gif)
157
![](/Images/OutliningIndicators/InBlock.gif)
158
![](/Images/OutliningIndicators/InBlock.gif)
159
![](/Images/OutliningIndicators/InBlock.gif)
160
![](/Images/OutliningIndicators/InBlock.gif)
161
![](/Images/OutliningIndicators/InBlock.gif)
162
![](/Images/OutliningIndicators/InBlock.gif)
163
![](/Images/OutliningIndicators/InBlock.gif)
164
![](/Images/OutliningIndicators/InBlock.gif)
165
![](/Images/OutliningIndicators/InBlock.gif)
166
![](/Images/OutliningIndicators/InBlock.gif)
167
![](/Images/OutliningIndicators/InBlock.gif)
168
![](/Images/OutliningIndicators/InBlock.gif)
169
![](/Images/OutliningIndicators/InBlock.gif)
170
![](/Images/OutliningIndicators/InBlock.gif)
171
![](/Images/OutliningIndicators/InBlock.gif)