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>
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>
171
本文转自BearRui(AK-47)博客园博客,原文链接:http://www.cnblogs.com/BearsTaR/articles/386244.html ,如需转载请自行联系原作者