您现在的位置: 365建站网 > 365学习 > 纯CSS下拉菜单

纯CSS下拉菜单

文章来源:365jz.com     点击数:638    更新时间: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                     <href="http://www.ittsinghua.com/index.php">首页 </A>
 48                 </LI>
 49                 <LI class="navli"   >
 50                     <A  href="">学校介绍</A>
 51                     <UL>
 52                         <LI>
 53                             <href="">学院概况</A>
 54                             <LI>
 55                                 <href="">学院文化</A>
 56                                 <LI>
 57                                     <href="">学院优势</A>
 58                                     <LI>
 59                                         <href="">教学特色</A>
 60                                         <LI>
 61                                             <href="">校区环境</A>
 62                                             <LI>
 63                                             <href="">学院荣誉</A>
 64                                             <LI>
 65                                                 <href="">毕业证书</A>
 66                                             </LI>
 67                                             </UL>
 68                                         </LI>
 69                                         <LI class="navli"   >
 70                                             <A  href="">专业优势 </A>
 71                                             <UL>
 72                                                 <LI>
 73                                                     <href="">高级网络</A>
 74                                                     <LI>
 75                                                         <href="">数码艺术</A>
 76                                                         <LI>
 77                                                             <href="">室内设计</A>
 78                                                             <LI>
 79                                                                 <href="">电子商务</A>
 80                                                                 <LI>
 81                                                                 <href="">三维动画</A>
 82                                                                 <LI>
 83                                                                     <href="">软件工程</A>
 84                                                                 </LI>
 85                                                                 </UL>
 86                                                             </LI>
 87                                                             <LI class="navli"  >
 88                                                                 <href="">课程体系 </A>
 89                                                                 <UL>
 90                                                                     <LI>
 91                                                                         <href="">高级网络</A>
 92                                                                         <LI>
 93                                                                             <href="">数码设计</A>
 94                                                                             <LI>
 95                                                                                 <href="">室内设计</A>
 96                                                                                 <LI>
 97                                                                                     <href="">电子商务</A>
 98                                                                                     <LI>
 99                                                                                     <href="">三维动画</A>
100                                                                                     <LI>
101                                                                                         <href="">软件工程</A>
102                                                                                     </LI>
103                                                                                     </UL>
104                                                                                 </LI>
105                                                                                 <LI class="navli">
106                                                                                     <href="">就业资讯 </A>
107                                                                                     <UL>
108                                                                                         <LI>
109                                                                                             <href="">就业流程</A>
110                                                                                             <LI>
111                                                                                                 <href="">就业跟踪</A>
112                                                                                                 <LI>
113                                                                                                     <href="">就业明星</A>
114                                                                                                     <LI>
115                                                                                                     <href="">就业指导</A>
116                                                                                                     <LI>
117                                                                                                         <href="">招聘信息</A>
118                                                                                                     </LI>
119                                                                                                     </UL>
120                                                                                                 </LI>
121                                                                                                 <LI class="navli">
122                                                                                                     <A  href="">新闻动态 </A>
123                                                                                                     <UL>
124                                                                                                         <LI>
125                                                                                                             <href="">最新开课</A>
126                                                                                                             <LI>
127                                                                                                             <href="">学院动态</A>
128                                                                                                             <LI>
129                                                                                                                 <href="">考试中心</A>
130                                                                                                             </LI>
131                                                                                                             </UL>
132                                                                                                         </LI>
133                                                                                                         <LI class="navli">
134                                                                                                             <A   href="">学院风采 </A>
135                                                                                                             <UL>
136                                                                                                                 <LI>
137                                                                                                                     <href="">教师精英</A>
138                                                                                                                     <LI>
139                                                                                                                     <href="">学员风采</A>
140                                                                                                                     <LI>
141                                                                                                                         <href="">作品展示</A>
142                                                                                                                     </LI>
143                                                                                                                     </UL>
144                                                                                                                 </LI>
145                                                                                                                 <LI class="navli">
146                                                                                                                     <A  href="">在线答疑 </A>
147                                                                                                                     <UL>
148                                                                                                                         <LI>
149                                                                                                                             <href="">常见问题</A>
150                                                                                                                             <LI>
151                                                                                                                             <href="">联系方式</A>
152                                                                                                                             <LI>
153                                                                                                                                 <href="" target=_blank>电子地图</A>
154                                                                                                                             </LI>
155                                                                                                                             </UL>
156                                                                                                                         </LI>
157                                                                                                                         <LI class="navli">
158                                                                                                                             <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>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (638人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号-1