![]()
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>css菜单演示</title>
6
7
8 <style type="text/css">
9 <!--
10
11 *{margin:0;padding:0;border:0;}
12 body {
13 font-family: arial, 宋体, serif;
14 font-size:12px;
15 }
16
17
18 #nav {
19 line-height: 24px; list-style-type: none; background:#666;
20 }
21
22 #nav a {
23 display: block; width: 80px; text-align:center;
24 }
25
26 #nav a:link {
27 color:#666; text-decoration:none;
28 }
29 #nav a:visited {
30 color:#666;text-decoration:none;
31 }
32 #nav a:hover {
33 color:#FFF;text-decoration:none;font-weight:bold;
34 }
35
36 #nav li {
37 float: left; width: 80px; background:#CCC;
38 }
39 #nav li a:hover{
40 background:#999;
41 }
42 #nav li ul {
43 line-height: 27px; list-style-type: none;text-align:left;
44 left: -999em; width: 180px; position: absolute;
45 }
46 #nav li ul li{
47 float: left; width: 180px;
48 background: #F6F6F6;
49 }
50
51
52 #nav li ul a{
53 display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
54 }
55
56 #nav li ul a:link {
57 color:#666; text-decoration:none;
58 }
59 #nav li ul a:visited {
60 color:#666;text-decoration:none;
61 }
62 #nav li ul a:hover {
63 color:#F3F3F3;text-decoration:none;font-weight:normal;
64 background:#C00;
65 }
66
67 #nav li:hover ul {
68 left: auto;
69 }
70 #nav li.sfhover ul {
71 left: auto;
72 }
73 #content {
74 clear: left;
75 }
76
77
78 -->
79 </style>
80
81 <script type=text/javascript><!--//--><![CDATA[//><!--
82 function menuFix() {
83 var sfEls = document.getElementById("nav").getElementsByTagName("li");
84 for (var i=0; i<sfEls.length; i++) {
85 sfEls[i].onmouseover=function() {
86 this.className+=(this.className.length>0? " ": "") + "sfhover";
87 }
88 sfEls[i].onMouseDown=function() {
89 this.className+=(this.className.length>0? " ": "") + "sfhover";
90 }
91 sfEls[i].onMouseUp=function() {
92 this.className+=(this.className.length>0? " ": "") + "sfhover";
93 }
94 sfEls[i].onmouseout=function() {
95 this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"),
96
97 "");
98 }
99 }
100 }
101 window.onload=menuFix;
102 //more javascript from http://www.webjx.com
103 //--><!]]></script>
104
105 </head>
106 <body>
107
108
109 <ul id="nav">
110 <li><a href="#">产品介绍</a>
111 <ul>
112 <li><a href="#">产品一</a></li>
113 <li><a href="#">产品一</a></li>
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 </ul>
119 </li>
120 <li><a href="#">服务介绍</a>
121 <ul>
122 <li><a href="#">服务二</a></li>
123 <li><a href="#">服务二</a></li>
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 </ul>
129 </li>
130 <li><a href="#">成功案例</a>
131 <ul>
132 <li><a href="#">案例三</a></li>
133 <li><a href="#">案例</a></li>
134 <li><a href="#">案例三案例三</a></li>
135 <li><a href="#">案例三案例三案例三</a></li>
136 </ul>
137 </li>
138 <li><a href="#">关于我们</a>
139 <ul>
140 <li><a href="#">我们四</a></li>
141 <li><a href="#">我们四</a></li>
142 <li><a href="#">我们四</a></li>
143 <li><a href="#">我们四111</a></li>
144 </ul>
145 </li>
146
147 <li><a href="#">在线演示</a>
148 <ul>
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 <li><a href="#">演示演示</a></li>
155 <li><a href="#">演示演示演示</a></li>
156 <li><a href="#">演示演示演示演示演示</a></li>
157 </ul>
158 </li>
159 <li><a href="#">联系我们</a>
160 <ul>
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 <li><a href="#">联系联系联系</a></li>
167 <li><a href="#">联系联系联系</a></li>
168 </ul>
169 </li>
170
171 </ul>
172
173 </body>
174 </html>
