几个CSS弹出菜单源码
纯CSS菜单
1< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
3[ <!ELEMENT a (#PCDATA | table)* > ]>
4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
5<head>
6<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
7<title> Drop Down Menu </title>
8<style type="text/css">
9body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
10.menu {display:none;}
11.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
12.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
13a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
14a.inner:hover {background:#add;}
15p { color:#000; font-size:16px;}
16</style>
17<!--[if IE]>
18 <style type="text/css">
19 /*< ![CDATA[*/
20.holder {display:none;}
21.menu {display:block;}
22a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
23a.outer:hover {color:#fff; background:#000; overflow:visible;}
24a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
25a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
26a.inner:hover {background:#add;}
27 /*]]>*/
28 </style>
29< ![endif]-->
30</head>
31<body>
32<p>For another demo with page content see <a href="http://www.stunicholls.myby.co.uk/menus/drop_down.html" title="another demo">this page</a>
33<div class="menu">
34<a class="outer" href="page1.html">MENU 1
35<table><tr><td>
36<a class="inner" href="page1a.html">Page 1a</a>
37<a class="inner" href="page1b.html">Page 1b</a>
38<a class="inner" href="page1c.html">Page 1c</a>
39<a class="inner" href="page1d.html">Page 1d</a>
40<a class="inner" href="page1e.html">Page 1e</a>
41</td></tr></table>
42</a>
43<a class="outer" href="page1.html">MENU 2
44<table><tr><td>
45<a class="inner" href="page2a.html">Page 2a</a>
46<a class="inner" href="page2b.html">Page 2b</a>
47<a class="inner" href="page2c.html">Page 2c</a>
48<a class="inner" href="page2d.html">Page 2d</a>
49</td></tr></table>
50</a>
51</div>
52<div class="holder">
53MENU 1<br />
54<a class="inner" href="page1a.html">Page 1a</a>
55<a class="inner" href="page1b.html">Page 1b</a>
56<a class="inner" href="page1c.html">Page 1c</a>
57<a class="inner" href="page1d.html">Page 1d</a>
58<a class="inner" href="page1e.html">Page 1e</a>
59</div>
60<div class="holder">
61MENU 2<br />
62<a class="inner" href="page2a.html">Page 2a</a>
63<a class="inner" href="page2b.html">Page 2b</a>
64<a class="inner" href="page2c.html">Page 2c</a>
65<a class="inner" href="page2d.html">Page 2d</a>
66</div>
67</p></body>
68</html>
JS+CSS
1< !DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6<title>css菜单演示</title>
7<style type="text/css">
8<!--
9*{margin:0;padding:0;border:0;}
10body {
11 font-family: arial, 宋体, serif;
12 font-size:12px;
13}
14
15
16#nav {
17 line-height: 24px; list-style-type: none; background:#666;
18}
19
20#nav a {
21 display: block; width: 80px; text-align:center;
22}
23
24#nav a:link {
25 color:#666; text-decoration:none;
26}
27#nav a:visited {
28 color:#666;text-decoration:none;
29}
30#nav a:hover {
31 color:#FFF;text-decoration:none;font-weight:bold;
32}
33
34#nav li {
35 float: left; width: 80px; background:#CCC;
36}
37#nav li a:hover{
38 background:#999;
39}
40#nav li ul {
41 line-height: 27px; list-style-type: none;text-align:left;
42 left: -999em; width: 180px; position: absolute;
43}
44#nav li ul li{
45 float: left; width: 180px;
46 background: #F6F6F6;
47}
48
49
50#nav li ul a{
51 display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
52}
53
54#nav li ul a:link {
55 color:#666; text-decoration:none;
56}
57#nav li ul a:visited {
58 color:#666;text-decoration:none;
59}
60#nav li ul a:hover {
61 color:#F3F3F3;text-decoration:none;font-weight:normal;
62 background:#C00;
63}
64
65#nav li:hover ul {
66 left: auto;
67}
68#nav li.sfhover ul {
69 left: auto;
70}
71#content {
72 clear: left;
73}
74-->
75</style>
76<script type=text/j avascript><!--//-->< ![CDATA[//><!--
77function menuFix() {
78 var sfEls = document.getElementById("nav").getElementsByTagName("li");
79 for (var i=0; i<sfEls.length; i++) {
80 sfEls[i].onmouseover=function() {
81 this.className+=(this.className.length>0? " ": "") + "sfhover";
82 }
83 sfEls[i].onMouseDown=function() {
84 this.className+=(this.className.length>0? " ": "") + "sfhover";
85 }
86 sfEls[i].onMouseUp=function() {
87 this.className+=(this.className.length>0? " ": "") + "sfhover";
88 }
89 sfEls[i].onmouseout=function() {
90 this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
91
92"");
93 }
94 }
95}
96window.onload=menuFix;
97//-->< !]]></script>
98</head>
99<body>
100<ul id="nav">
101<li><a href="#">产品介绍</a>
102 <ul>
103 <li><a href="#">产品一</a></li>
104 <li><a href="#">产品一</a></li>
105 <li><a href="#">产品一</a></li>
106 <li><a href="#">产品一</a></li>
107 <li><a href="#">产品一</a></li>
108 <li><a href="#">产品一</a></li>
109 </ul>
110</li>
111<li><a href="#">服务介绍</a>
112 <ul>
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 <li><a href="#">服务二</a></li>
119 </ul>
120</li>
121<li><a href="#">成功案例</a>
122 <ul>
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 </ul>
128</li>
129<li><a href="#">关于我们</a>
130 <ul>
131 <li><a href="#">我们四</a></li>
132 <li><a href="#">我们四</a></li>
133 <li><a href="#">我们四</a></li>
134 <li><a href="#">我们四111</a></li>
135 </ul>
136</li>
137
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="#">演示演示演示</a></li>
144 <li><a href="#">演示演示演示</a></li>
145 <li><a href="#">演示演示</a></li>
146 <li><a href="#">演示演示演示</a></li>
147 <li><a href="#">演示演示演示演示演示</a></li>
148 </ul>
149</li>
150<li><a href="#">联系我们</a>
151 <ul>
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</ul>
162</body>
163</html>