1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>css二级菜单演示</title>
6 <style type="text/css">
7 <!--
8 * {
9 margin:0;
10 padding:0;
11 border:0;
12 }
13 body {
14 font-family: arial, 宋体, serif;
15 font-size:12px;
16 }
17 #nav {
18 line-height: 24px;
19 list-style-type: none;
20 background:#666;
21 }
22 #nav a {
23 display: block;
24 width: 80px;
25 text-align:center;
26 }
27 #nav a:link {
28 color:#666;
29 text-decoration:none;
30 }
31 #nav a:visited {
32 color:#666;
33 text-decoration:none;
34 }
35 #nav a:hover {
36 color:#FFF;
37 text-decoration:none;
38 font-weight:bold;
39 }
40 #nav li {
41 float: left;
42 width: 80px;
43 background:#CCC;
44 }
45 #nav li a:hover {
46 background:#999;
47 }
48 #nav li ul {
49 line-height: 27px;
50 list-style-type: none;
51 text-align:left;
52 left: -999em;
53 width: 80px;
54 position: absolute;
55 }
56 #nav li ul li {
57 float: left;
58 width: 80px;
59 background: #F6F6F6;
60 }
61 #nav li ul a {
62 display: block;
63 width: 80px;
64 text-align:center
65 }
66 #nav li ul a:link {
67 color:#666;
68 text-decoration:none;
69 }
70 #nav li ul a:visited {
71 color:#666;
72 text-decoration:none;
73 }
74 #nav li ul a:hover {
75 color:#F3F3F3;
76 text-decoration:none;
77 font-weight:normal;
78 background:#C00;
79 }
80 #nav li:hover ul {
81 left: auto;
82 }
83 #nav li.sfhover ul {
84 left: auto;
85 }
86 #content {
87 clear: left;
88 }
89 -->
90 </style>
91 <script type=text/javascript>
92 <!--//--><![CDATA[//><!--
93 function menuFix() {
94 var sfEls = document.getElementById("nav").getElementsByTagName("li");
95 for (var i=0; i<sfEls.length; i++) {
96 sfEls[i].onmouseover=function() {
97 this.className+=(this.className.length>0? " ": "") + "sfhover";
98 }
99 sfEls[i].onMouseDown=function() {
100 this.className+=(this.className.length>0? " ": "") + "sfhover";
101 }
102 sfEls[i].onMouseUp=function() {
103 this.className+=(this.className.length>0? " ": "") + "sfhover";
104 }
105 sfEls[i].onmouseout=function() {
106 this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
107 }
108 }
109 }
110 window.onload=menuFix;
111 //--><!]]>
112 </script>
113 </head>
114 <body>
115 <ul id="nav">
116 <li>
117 <a href="#">新浪</a>
118 <ul>
119 <li>
120 <a href="#">新浪新闻</a>
121 </li>
122 <li>
123 <a href="#">新浪体育</a>
124 </li>
125 <li>
126 <a href="#">新浪汽车</a>
127 </li>
128 <li>
129 <a href="#">新浪微博</a>
130 </li>
131 <li>
132 <a href="#">新浪科技</a>
133 </li>
134 </ul>
135 </li>
136 <li>
137 <a href="#">新浪</a>
138 <ul>
139 <li>
140 <a href="#">新浪新闻</a>
141 </li>
142 <li>
143 <a href="#">新浪体育</a>
144 </li>
145 <li>
146 <a href="#">新浪汽车</a>
147 </li>
148 <li>
149 <a href="#">新浪微博</a>
150 </li>
151 <li>
152 <a href="#">新浪科技</a>
153 </li>
154 </ul>
155 </li>
156 </ul>
157 </body>
158 </html>
