去一家公司面试时候即兴用CSS实现横向二级菜单_网页代码站(www.webdm.cn)

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head >
5 < title > 去一家公司面试时候即兴用CSS实现横向二级菜单_网页代码站(www.webdm.cn) </ title >
6 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
7 < script type ="text/javascript" >
8 startList = function () {
9 if (document.all && document.getElementById) {
10 navRoot = document.getElementById( " nav " );
11 for (i = 0 ; i < navRoot.childNodes.length; i ++ ) {
12 node = navRoot.childNodes[i];
13 if (node.nodeName == " LI " ) {
14 node.onmouseover = function () {
15 this .className += " over " ;
16 }
17 node.onmouseout = function () {
18 this .className = this .className.replace( " over " , "" );
19 }
20 }
21 }
22 }
23 }
24 window.onload = startList;
25 </ script >
26 < style type ="text/css" media ="all" >
27 html { min-width : 742px ; }
28 img { border : 0 ; }
29 p.access { display : none ; }
30 div#counters { display : none ; }
31 a { text-decoration : none ; }
32 body {
33 overflow : auto ;
34 text-align : center ;
35 margin : 0 auto ;
36 padding : 0 ;
37 border : 0 ;
38 }
39 ul#nav,ul#nav ul {
40 margin : 0 auto ;
41 text-align : left ;
42 padding : 0 ;
43 list-style : none ;
44 background : #fff ;
45 z-index : 99 ;
46 }
47 ul#nav {
48 width : 732px ;
49 display : block ;
50 height : 24px ;
51 clear : both ;
52 }
53 ul#nav li {
54 position : relative ;
55 z-index : 999 ;
56 float : left ;
57 }
58 ul#nav ul li {
59 display : block ;
60 }
61 ul#nav ul {
62 width : 100px ;
63 height : auto ;
64 position : absolute ;
65 text-align : left ;
66 left : 0px ;
67 display : none ;
68 border : solid 1px #697210 ;
69 }
70 ul#nav li.over a,ul#nav li:hover a {
71 border-color : #E2144A ;
72 background : #fdd ;
73 font-weight : bold ;
74 color : #E2144A ;
75 }
76 ul#nav li.over ul a,ul#nav li:hover ul a {
77 background : #fff ;
78 font-weight : normal ;
79 color : #777 ;
80 }
81 ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover {
82 background : #fff ;
83 font-weight : normal ;
84 color : #E2144A ;
85 background : #fdd ;
86 border-color : #E2144A ;
87 font-weight : bold ;
88 }
89
90 ul#nav a {
91 font-size : 14px ;
92 line-height : 17px ;
93 display : block ;
94 padding : 0 0 0 10px ;
95 width : 78px ;
96 color : #777 ;
97 height : 17px ;
98 background : #fff ;
99 border-left : solid 1px #fff ;
100 border-top : solid 1px #fff ;
101 border-right : solid 1px #fff ;
102 border-bottom : solid 5px #697210 ;
103 }
104 ul#nav ul li {
105 width : 100px ;
106 border : 0 ;
107 }
108 /* Fix IE. Hide from IE Mac \ */
109 * html ul#nav li { float : left ; height : 17px ; }
110 * html ul#nav li a { height : 17px ; }
111 ul#nav ul a { padding : 2px 0px 2px 10px ; border : 0 ; width : 90px ; }
112 ul#nav li:hover ul,ul#nav li.over ul { display : block ; }
113 </ style >
114 </ head >
115 < body >
116 < p > 一款面试时写的菜单 </ p >
117 < ul id ="nav" >
118 < li >< a href ="#" > 文章 </ a >
119 < ul >
120 < li >< a href ="#" > 随笔 </ a ></ li >
121 < li >< a href ="#" > 小说 </ a ></ li >
122 </ ul >
123 </ li >
124 < li >< a href ="#" > 设计 </ a >
125 < ul >
126 < li >< a href ="#" > 漫画 </ a ></ li >
127 < li >< a href ="#" > 摄影 </ a ></ li >
128 < li >< a href ="#" > 图文 </ a ></ li >
129 </ ul >
130 </ li >
131 < li >< a href ="#" > 资源 </ a >
132 < ul >
133 < li >< a href ="#" > 代码 </ a ></ li >
134 < li >< a href ="#" > 素材 </ a ></ li >
135 </ ul >
136 </ li >
137 < li >< a href ="#" > 收藏夹 </ a ></ li >
138 < li >< a href ="#" > 爱好 </ a >
139 < ul >
140 < li >< a href ="#" > 哲学 </ a ></ li >
141 < li >< a href ="#" > 小说 </ a ></ li >
142 </ ul >
143 </ li >
144 < li >< a href ="#" ' > 日记 </ a >
145 < ul >
146 < li >< a href ="#" > 生活 </ a ></ li >
147 < li >< a href ="#" > 工作 </ a ></ li >
148 </ ul >
149 </ li >
150 < li >< a href ="#" > 日程 </ a >
151 < ul >
152 < li >< a href ="#" ' > 计划事项 </ a ></ li >
153 < li >< a href ="#" > 已做事项 </ a ></ li >
154 </ ul >
155 </ li >
156 < li >< a href ="#" > 其他 </ a >
157 < ul >
158 < li >< a href ="#" > 关于 </ a ></ li >
159 < li >< a href ="#" > 留言 </ a ></ li >
160 </ ul >
161 </ li >
162 </ ul >
163 </ body >
164 </ html >
165
166 < a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/d2c5709e-10e1-4820-8ef3-ba1e3728879e.html

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