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