1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>css菜单演示</title>
5 <style type="text/css">
6
7 *{margin:0;padding:0;border:0;}
8 body {
9 font-family: arial, 宋体, serif;
10 font-size:12px;
11 }
12 #nav {
13 text-align:center;
14 line-height:24px;list-style-type:none;background:#666;
15 margin-left:30px;
16 }
17
18 #nav a {
19 display: block; width: 80px; text-align:center;
20 }
21
22 #nav a:link {
23 color:#666666; text-decoration:none;
24 }
25 #nav a:visited {
26 color:#666;text-decoration:none;
27 }
28 #nav a:hover {
29 color:#CCCCCC;text-decoration:none;font-weight:bold;
30 }
31
32 #nav li {
33 float: left; width: 80px; background:#00FFFF;
34 }
35 #nav li a:hover{
36 background:#999;
37 }
38 #nav li ul {
39 line-height:27px;list-style-type:none;text-align:left;
40 left:-999em;width:80px; position: absolute;
41 margin-left:-40px;
42 }
43 #nav li ul li{
44 float:left;width:80px;background: #F6F6F6;
45 }
46 #nav li ul a{
47 display:block;width:80px;text-align:left;padding-left:24px;
48 }
49
50 #nav li ul a:link {
51 color:#666; text-decoration:none;
52 }
53 #nav li ul a:visited {
54 color:#666;text-decoration:none;
55 }
56 #nav li ul a:hover {
57 color:#F3F3F3;text-decoration:none;font-weight:normal;
58 background:#ccc;
59 }
60
61 #nav li:hover ul {
62 left: auto;
63 }
64 #nav li.sfhover ul {
65 left: auto;
66 }
67 #content {
68 clear: left;
69 }
70
71 </style>
72
73 <script type=text/javascript>
74 function menuFix() {
75 var elems = document.getElementById("nav").getElementsByTagName("li");
76 for (var i=0; i<elems.length; i++) {
77 elems[i].onmouseover = function() {
78 this.className += (this.className.length>0? " ": "") + "sfhover";
79 }
80 elems[i].onMouseDown = function() {
81 this.className += (this.className.length>0? " ": "") + "sfhover";
82 }
83 elems[i].onMouseUp = function() {
84 this.className += (this.className.length>0? " ": "") + "sfhover";
85 }
86 elems[i].onmouseout = function() {
87 this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
88 }
89 }
90 }
91 window.onload=menuFix;
92 </script>
93
94 </head>
95 <body>
96 <ul id="nav">
97 <li><a href="#">下拉菜单</a>
98 <ul>
99 <li><a href="#">下拉菜单</a></li>
100 <li><a href="#">下拉菜单</a></li>
101 <li><a href="#">下拉菜单</a></li>
102 <li><a href="#">下拉菜单</a></li>
103 <li><a href="#">下拉菜单</a></li>
104 <li><a href="#">下拉菜单</a></li>
105 </ul>
106 </li>
107 <li><a href="#">下拉菜单</a>
108 <ul>
109 <li><a href="#">下拉菜单</a></li>
110 <li><a href="#">下拉菜单</a></li>
111 <li><a href="#">下拉菜单</a></li>
112 <li><a href="#">下拉菜单</a></li>
113 <li><a href="#">下拉菜单</a></li>
114 <li><a href="#">下拉菜单</a></li>
115 </ul>
116 </li>
117 </ul>
118 </body>
119 </html>
