css打造的又一款清新的横排下拉菜单_网页代码站(www.webdm.cn)

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

 

转载于:https://www.cnblogs.com/webdm/archive/2010/12/29/1919446.html