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