纯CSS下拉菜单
文章来源：365jz.com 点击数：675 更新时间：2009-09-19 10:29 参与评论
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <HEAD><TITLE></title>
3 <STYLE type=text/css>
4 *{margin:0px;padding:0px;border:0px;}
5 #top{margin:50px;}
6 #navli {
7 FLOAT: left;
8 }
9 .navli {
10 FLOAT: left; margin-left:10px;POSITION: relative;/*设为relative，则li ul的left和top是相对于.navli */
11 }
12 .navli ul{display:none;Z-INDEX:999;POSITION: absolute; }
13 LI:hover UL {
14 DISPLAY: block;BACKGROUND: #ffffff;
15 }
16 LI UL LI {
17 margin-top:5px;
18 }
19 LI UL{left:-2px;top:18px;}
20 ul li{list-style:none;}
21 </STYLE>
22
23 <SCRIPT type=text/javascript>
24 /*----------------subnav----------------------多余 用css就已经实现*/
25
26 /*function showUl(node)
27 {
28 //var parantLi=node.parentNode;
29 //parantLi.className+=" over";
30 //node.className+=" over";
31 }
32
33 function removeCss(node)
34 {//var parantLi=node.parentNode;
35 //parantLi.className=parantLi.className.replace(" over", "")
36 node.className=node.className.replace(" over", "");
37
38 }*/
39 </SCRIPT>
40
41 </head>
42 <body>
43
44 <DIV id=top>
45 <UL id=nav>
46 <LI id=navli>
47 <A href="http://www.ittsinghua.com/index.php">首页 </A>
48 </LI>
49 <LI class="navli" >
50 <A href="">学校介绍</A>
51 <UL>
52 <LI>
53 <A href="">学院概况</A>
54 <LI>
55 <A href="">学院文化</A>
56 <LI>
57 <A href="">学院优势</A>
58 <LI>
59 <A href="">教学特色</A>
60 <LI>
61 <A href="">校区环境</A>
62 <LI>
63 <A href="">学院荣誉</A>
64 <LI>
65 <A href="">毕业证书</A>
66 </LI>
67 </UL>
68 </LI>
69 <LI class="navli" >
70 <A href="">专业优势 </A>
71 <UL>
72 <LI>
73 <A href="">高级网络</A>
74 <LI>
75 <A href="">数码艺术</A>
76 <LI>
77 <A href="">室内设计</A>
78 <LI>
79 <A href="">电子商务</A>
80 <LI>
81 <A href="">三维动画</A>
82 <LI>
83 <A href="">软件工程</A>
84 </LI>
85 </UL>
86 </LI>
87 <LI class="navli" >
88 <A href="">课程体系 </A>
89 <UL>
90 <LI>
91 <A href="">高级网络</A>
92 <LI>
93 <A href="">数码设计</A>
94 <LI>
95 <A href="">室内设计</A>
96 <LI>
97 <A href="">电子商务</A>
98 <LI>
99 <A href="">三维动画</A>
100 <LI>
101 <A href="">软件工程</A>
102 </LI>
103 </UL>
104 </LI>
105 <LI class="navli">
106 <A href="">就业资讯 </A>
107 <UL>
108 <LI>
109 <A href="">就业流程</A>
110 <LI>
111 <A href="">就业跟踪</A>
112 <LI>
113 <A href="">就业明星</A>
114 <LI>
115 <A href="">就业指导</A>
116 <LI>
117 <A href="">招聘信息</A>
118 </LI>
119 </UL>
120 </LI>
121 <LI class="navli">
122 <A href="">新闻动态 </A>
123 <UL>
124 <LI>
125 <A href="">最新开课</A>
126 <LI>
127 <A href="">学院动态</A>
128 <LI>
129 <A href="">考试中心</A>
130 </LI>
131 </UL>
132 </LI>
133 <LI class="navli">
134 <A href="">学院风采 </A>
135 <UL>
136 <LI>
137 <A href="">教师精英</A>
138 <LI>
139 <A href="">学员风采</A>
140 <LI>
141 <A href="">作品展示</A>
142 </LI>
143 </UL>
144 </LI>
145 <LI class="navli">
146 <A href="">在线答疑 </A>
147 <UL>
148 <LI>
149 <A href="">常见问题</A>
150 <LI>
151 <A href="">联系方式</A>
152 <LI>
153 <A href="" target=_blank>电子地图</A>
154 </LI>
155 </UL>
156 </LI>
157 <LI class="navli">
158 <A href="">网上报名</A>
159 </LI>
160 </UL>
161 </DIV>
162 <br />
163 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
164 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
165 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
166 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
167 </body>
168 </html>
2 <HEAD><TITLE></title>
3 <STYLE type=text/css>
4 *{margin:0px;padding:0px;border:0px;}
5 #top{margin:50px;}
6 #navli {
7 FLOAT: left;
8 }
9 .navli {
10 FLOAT: left; margin-left:10px;POSITION: relative;/*设为relative，则li ul的left和top是相对于.navli */
11 }
12 .navli ul{display:none;Z-INDEX:999;POSITION: absolute; }
13 LI:hover UL {
14 DISPLAY: block;BACKGROUND: #ffffff;
15 }
16 LI UL LI {
17 margin-top:5px;
18 }
19 LI UL{left:-2px;top:18px;}
20 ul li{list-style:none;}
21 </STYLE>
22
23 <SCRIPT type=text/javascript>
24 /*----------------subnav----------------------多余 用css就已经实现*/
25
26 /*function showUl(node)
27 {
28 //var parantLi=node.parentNode;
29 //parantLi.className+=" over";
30 //node.className+=" over";
31 }
32
33 function removeCss(node)
34 {//var parantLi=node.parentNode;
35 //parantLi.className=parantLi.className.replace(" over", "")
36 node.className=node.className.replace(" over", "");
37
38 }*/
39 </SCRIPT>
40
41 </head>
42 <body>
43
44 <DIV id=top>
45 <UL id=nav>
46 <LI id=navli>
47 <A href="http://www.ittsinghua.com/index.php">首页 </A>
48 </LI>
49 <LI class="navli" >
50 <A href="">学校介绍</A>
51 <UL>
52 <LI>
53 <A href="">学院概况</A>
54 <LI>
55 <A href="">学院文化</A>
56 <LI>
57 <A href="">学院优势</A>
58 <LI>
59 <A href="">教学特色</A>
60 <LI>
61 <A href="">校区环境</A>
62 <LI>
63 <A href="">学院荣誉</A>
64 <LI>
65 <A href="">毕业证书</A>
66 </LI>
67 </UL>
68 </LI>
69 <LI class="navli" >
70 <A href="">专业优势 </A>
71 <UL>
72 <LI>
73 <A href="">高级网络</A>
74 <LI>
75 <A href="">数码艺术</A>
76 <LI>
77 <A href="">室内设计</A>
78 <LI>
79 <A href="">电子商务</A>
80 <LI>
81 <A href="">三维动画</A>
82 <LI>
83 <A href="">软件工程</A>
84 </LI>
85 </UL>
86 </LI>
87 <LI class="navli" >
88 <A href="">课程体系 </A>
89 <UL>
90 <LI>
91 <A href="">高级网络</A>
92 <LI>
93 <A href="">数码设计</A>
94 <LI>
95 <A href="">室内设计</A>
96 <LI>
97 <A href="">电子商务</A>
98 <LI>
99 <A href="">三维动画</A>
100 <LI>
101 <A href="">软件工程</A>
102 </LI>
103 </UL>
104 </LI>
105 <LI class="navli">
106 <A href="">就业资讯 </A>
107 <UL>
108 <LI>
109 <A href="">就业流程</A>
110 <LI>
111 <A href="">就业跟踪</A>
112 <LI>
113 <A href="">就业明星</A>
114 <LI>
115 <A href="">就业指导</A>
116 <LI>
117 <A href="">招聘信息</A>
118 </LI>
119 </UL>
120 </LI>
121 <LI class="navli">
122 <A href="">新闻动态 </A>
123 <UL>
124 <LI>
125 <A href="">最新开课</A>
126 <LI>
127 <A href="">学院动态</A>
128 <LI>
129 <A href="">考试中心</A>
130 </LI>
131 </UL>
132 </LI>
133 <LI class="navli">
134 <A href="">学院风采 </A>
135 <UL>
136 <LI>
137 <A href="">教师精英</A>
138 <LI>
139 <A href="">学员风采</A>
140 <LI>
141 <A href="">作品展示</A>
142 </LI>
143 </UL>
144 </LI>
145 <LI class="navli">
146 <A href="">在线答疑 </A>
147 <UL>
148 <LI>
149 <A href="">常见问题</A>
150 <LI>
151 <A href="">联系方式</A>
152 <LI>
153 <A href="" target=_blank>电子地图</A>
154 </LI>
155 </UL>
156 </LI>
157 <LI class="navli">
158 <A href="">网上报名</A>
159 </LI>
160 </UL>
161 </DIV>
162 <br />
163 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
164 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
165 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
166 <div><p>dsfefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweee</p></div>
167 </body>
168 </html>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
