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
7
<style type="text/css">
8
9
*{margin:0;padding:0;border:0;}
10
body {
11
font-family: arial, 宋体, serif;
12
font-size:12px;
13
}
14
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
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
68
-->
69
</style>
70
71
<script type=text/javascript><!--//--><
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
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
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
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
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
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
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
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
<!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

7
<style type="text/css">8

9
*{margin:0;padding:0;border:0;}10
body {11
font-family: arial, 宋体, serif;12
font-size:12px;13
}14

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

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

68
-->69
</style>70

71
<script type=text/javascript><!--//--><
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

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

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

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

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

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

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

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



*
浙公网安备 33010602011771号