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>
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>