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