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">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>css打造的又一款清新的横排下拉菜单_网页代码站(www.webdm.cn)</title>
6 <style type="text/css" media="screen">
7 <!--
8 #Nav {
9 width: auto;
10 float: left;
11 border-left: 1px solid #777;
12
13 }
14
15 ul {
16 margin: 0px;
17 padding: 0px;
18 list-style: none;
19 }
20
21 ul li {
22 position: relative;
23 width: 120px;
24 float: left;
25 }
26
27 li ul {
28 position: absolute;
29 left: 0px;
30 top: 23px;
31 display: none;
32 border-bottom: 1px solid #777;
33 border-left: 0px;
34 }
35
36 ul li a {
37 display: block;
38 font-size: 12px;
39 line-height: 22px;
40 text-decoration: none;
41 /* www.webdm.cn*/
42 color: #333;
43 background-color: #FFF;
44 height: 22px;
45 padding-left: 8px;
46 border: 1px solid #777;
47 border-left: 0px;
48 }
49
50 ul li ul li a {
51 border: 1px solid #777;
52 border-bottom: 0px;
53 }
54
55 a:hover {
56 color: #F60;
57 background-color: #EFEFEF;
58
59 }
60
61 * html ul li {
62 float: left;
63 height: 1%;
64 }
65 * html ul li a {
66 height: 1%;
67 }
68
69 li:hover ul, li.over ul {
70 display: block;
71 }
72 -->
73 </style>
74 <script language="javascript" type="text/javascript">
75 <!--
76 startList = function() {
77 if (document.all && document.getElementById) {
78 var menuRoot = document.getElementById("Menu");
79 for (var i = 0; i < menuRoot.childNodes.length; i++) {
80 var node = menuRoot.childNodes[i];
81 if (node.nodeName == "LI") {
82 node.onmouseover = function() {
83 this.className += " over";
84 }
85 node.onmouseout = function() {
86 this.className = this.className.replace(" over", "");
87 }
88 }
89 }
90 }
91 }
92 window.onload = startList;
93 -->
94 </script>
95 </head>
96 <body>
97 <div id="Nav">
98 <ul id="Menu">
99 <li><a href="#">首页</a></li>
100 <li><a href="#">关于我们</a>
101 <ul>
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 </ul>
113 </li>
114 <li><a href="#">网页特效</a>
115 <ul>
116 <li><a href="#">菜单</a></li>
117 <li><a href="#">布局</a></li>
118 </ul>
119 </li>
120 </ul>
121 </div>
122 </body>
123 </html>
124
125 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/311ba408-6970-4733-9db4-73d469f36627.html