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;}
10body {
11font-family: arial, 宋体, serif;
12font-size:12px;
13
}
14
15#nav {
16line-height: 24px; list-style-type: none; background:#666;
17}
18#nav a {
19display: block; width: 80px; text-align:center;
20}
21#nav a:link {
22color:#666; text-decoration:none;
23}
24#nav a:visited {
25color:#666;text-decoration:none;
26}
27#nav a:hover {
28color:#FFF;text-decoration:none;font-weight:bold;
29}
30#nav li {
31float: left; width: 80px; background:#CCC;
32}
33#nav li a:hover{
34background:#999;
35}
36#nav li ul {
37line-height: 27px; list-style-type: none;text-align:left;
38left: -999em; width: 180px; position: absolute;
39}
40#nav li ul li{
41float: left; width: 180px;
42background: #F6F6F6;
43}
44
45#nav li ul a{
46display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
47}
48#nav li ul a:link {
49color:#666; text-decoration:none;
50}
51#nav li ul a:visited {
52color:#666;text-decoration:none;
53}
54#nav li ul a:hover {
55color:#F3F3F3;text-decoration:none;font-weight:normal;
56background:#C00;
57}
58#nav li:hover ul {
59left: auto;
60}
61#nav li.sfhover ul {
62left: auto;
63}
64#content {
65clear: left;
66}
67
68
-->
69
</
style
>
70
71
<
script
type
=text/javascript
>
<!--//--><![CDATA[//>
72
73function menuFix() {
74var sfEls = document.getElementById("nav").getElementsByTagName("li");
75for (var i=0; i<sfEls.length; i++) {
76sfEls[i].onmouseover=function(){
77this.className+=(this.className.length>0? " ": "") + "sfhover";
78}
79sfEls[i].onMouseDown=function() {
80this.className+=(this.className.length>0? " ": "") + "sfhover";
81}
82sfEls[i].onMouseUp=function() {
83this.className+=(this.className.length>0? " ": "") + "sfhover";
84}
85sfEls[i].onmouseout=function() {
86this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
87}
88}
89}
90window.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>
<!
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
>
<!--//--><![CDATA[//>72
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
本文转自BearRui(AK-47)博客园博客，原文链接：http://www.cnblogs.com/BearsTaR/articles/386244.html ，如需转载请自行联系原作者
