产品搜索
高级搜索 热门关键词 企业网站 网上商店系统 特惠套餐
   
 
网站公告  (5)
在线帮助  (9)
服务指南  (12)
 
企业建站 
智能网店 
专业建站 
特惠套餐 
您现在的位置: 网站建设|北京网站建设|网站制作|网站设计-北京惠通卓越公司 > 帮助中心 > 服务指南 > 下拉菜单代码1
下拉菜单代码1
网站建设|北京网站建设|网站制作|网站设计-北京惠通卓越公司   2009-06-11 02:51:38 作者:SystemMaster 来源: 文字大小:[大][中][小]
  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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>nav</title>  
  6. <script type="text/javascript">  
  7. <!--   
  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+="on";    
  16.         }    
  17.         node.onmouseout=function() {   
  18.           thisthis.className=this.className.replace("on", "");    
  19.         }   
  20.       }   
  21.     }   
  22.   }   
  23. }   
  24. window.onload=startList;   
  25. -->  
  26. </script>  
  27. <style type="text/css">  
  28. <!--   
  29. body {   
  30.   font-size: 12px    
  31.   font-family: Arial,Verdana,Helvetica,sans-serif;   
  32. }   
  33.   
  34. ul{   
  35.   margin: 0;   
  36.   padding: 0;   
  37.   list-style: none;   
  38.   width: 200px;   
  39. }   
  40.   
  41. ul li {   
  42.   position: relative;   
  43. }   
  44.   
  45. ul li ul {   
  46.   position: absolute;   
  47.   left: 199px;   
  48.   top: 0;   
  49.   display: none;   
  50.   list-style: none;   
  51.   width: 200px;   
  52.   margin: 0;   
  53.   padding: 0;   
  54. }   
  55.   
  56. ul li a {   
  57.   display: block;   
  58.   text-decoration: none;   
  59.   background: #cccccc;   
  60.   padding:5px 0 5px 20px;   
  61.   border: 1px solid #ffffff;   
  62.   border-bottom: 0;   
  63.   color:#666666;   
  64. }   
  65.   
  66. ul li a:hover {   
  67.   background: #cc0000;   
  68.   color:#ffffff;   
  69.   font-weight:bold;   
  70. }   
  71.   
  72. * html ul li {   
  73.   float: left;   
  74.   height: 1%;   
  75. }   
  76. * html ul li a {   
  77.   height: 1%;   
  78. }   
  79.   
  80. li:hover ul, li.on ul {   
  81.   display: block;   
  82. }    
  83.   
  84. -->  
  85. </style>  
  86. </head>  
  87.   
  88. <body>  
  89. <ul id="nav">  
  90.     <li><a href="#">menu1</a>  
  91.         <ul class="nav2">  
  92.             <li><a href="#">first</a></li>  
  93.             <li><a href="#">second</a></li>  
  94.         </ul>  
  95.     </li>  
  96.     <li><a href="#">menu2</a>  
  97.         <ul class="nav2">  
  98.             <li><a href="#">first</a></li>  
  99.             <li><a href="#">second</a></li>  
  100.             <li><a href="#">third</a></li>  
  101.         </ul>  
  102.     </li>  
  103.     <li><a href="#">menu3</a>  
  104.         <ul class="nav2">  
  105.             <li><a href="#">first</a></li>  
  106.             <li><a href="#">second</a></li>  
  107.             <li><a href="#">third</a></li>  
  108.             <li><a href="#">forth</a></li>  
  109.             <li><a href="#">fifth</a></li>  
  110.         </ul>  
  111.     </li>  
  112.     <li><a href="#">menu4</a>  
  113.         <ul class="nav2">  
  114.             <li><a href="#">first</a></li>  
  115.             <li><a href="#">second</a></li>  
  116.             <li><a href="#">third</a></li>  
  117.             <li><a href="#">forth</a></li>  
  118.             <li><a href="#">fifth</a></li>  
  119.             <li><a href="#">sixth</a></li>  
  120.         </ul>  
  121.     </li>  
  122. </ul>  
  123. </body>  
  124. </html>  
推荐文章 最新文章
MediPro标准插件程序调用原理详解
MediPro在线支付接口开发标准和样例
MediPro模版引擎的设计思路和基本特点
MediPro扩展插件的应用方法和注意事项
在插件模版中用自定标签调取内容的方法

最新评论
发表评论  
评论标题
评论内容
图片上传
表情图标
验 证 码
关于我们 建站流程 联系方式 付款方式 帮助中心 文档下载 会员社区 友情链接

 网站建设|北京网站建设|网站制作|网站设计-北京惠通卓越科技发展有限公司   电话：010-81588248 传真：010-81580027 手机：15910799489

  邮箱：infolyg#16nc.net 网站统计: Yoto公司地址：北京市通州区乔庄东区2号院5-443

 版权所有：北京惠通卓越科技发展有限公司 国家信息产业部备案号：京ICP备05013284号

Copyright © 2005-2008 www.16nc.com.cn All Rights Reserved

专业提供企业自助建站--网上商店系统--网上书店系统--网上花店系统