产品搜索
高级搜索 热门关键词 企业网站 网上商店系统 特惠套餐
   
 
网站公告  (5)
在线帮助  (9)
服务指南  (12)
 
企业建站 
智能网店 
专业建站 
特惠套餐 
您现在的位置: 网站建设|北京网站建设|网站制作|网站设计-北京惠通卓越公司 > 帮助中心 > 服务指南 > 下拉菜单代码2
下拉菜单代码2
网站建设|北京网站建设|网站制作|网站设计-北京惠通卓越公司   2009-06-11 02:52:00 作者: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=utf-8" />  
  5. <title>nav</title>  
  6. <script type=text/javascript>  
  7. <!--   
  8. var LastLeftID = "";   
  9.   
  10. function DoMenu(emid){   
  11.     var obj = document.getElementById(emid);    
  12.     obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");   
  13.     if((LastLeftID!="")&&(emid!=LastLeftID)){   
  14.         document.getElementById(LastLeftID).className = "collapsed";   
  15.     }   
  16.         LastLeftID = emid;   
  17. }   
  18. -->  
  19. </script>  
  20.   
  21. <style type="text/css">  
  22. <!--   
  23. ul,li,a{margin:0;padding:0;}   
  24.   
  25. body {   
  26.  font-family: Arial,Verdana,Helvetica,sans-serif;   
  27.  font-size:12px;   
  28. }   
  29.   
  30. #nav {   
  31.  width:180px;   
  32.  list-style-type: none;   
  33.  text-align:left;   
  34.  margin:10px 0 0 10px;   
  35. }   
  36.   
  37. #nav a {   
  38.  width: 180px;    
  39.  display: block;   
  40.  padding:5px 0 5px 20px;   
  41. }   
  42.   
  43. #nav li {   
  44.  background:#cccccc;   
  45.  border-bottom:#ffffff 1px solid;   
  46.  float:left;   
  47. }   
  48.   
  49. #nav li a:hover{   
  50.  background:#cc0000;   
  51. }   
  52.   
  53. #nav a:link  {   
  54.  color:#666;   
  55.  text-decoration:none;   
  56. }   
  57.   
  58. #nav a:visited  {   
  59.  color:#666;   
  60.  text-decoration:none;   
  61. }   
  62.   
  63. #nav a:hover  {   
  64.  color:#ffffff;   
  65.  text-decoration:none;   
  66.  font-weight:bold;   
  67. }   
  68.   
  69. #nav li ul {   
  70.  list-style:none;   
  71.  text-align:left;   
  72.  padding:0;   
  73. }   
  74.   
  75. #nav li ul li{    
  76.  background: #ebebeb;   
  77. }   
  78.   
  79. #nav li ul a{   
  80.  padding-left:20px;   
  81.  width:180px;   
  82. }   
  83.   
  84. #nav li ul a:link  {   
  85.  color:#666;   
  86.  text-decoration:none;   
  87. }   
  88. #nav li ul a:visited  {   
  89.  color:#666;   
  90.  text-decoration:none;   
  91. }   
  92. #nav li ul a:hover {   
  93.  color:#f3f3f3;   
  94.  text-decoration:none;   
  95.  font-weight:normal;   
  96.  background:#cc0000;   
  97. }   
  98.   
  99. #nav li:hover ul {   
  100.  left: auto;   
  101. }   
  102. #nav li.sfhover ul {   
  103.  left: auto;   
  104. }   
  105. #content {   
  106.  clear: left;    
  107. }   
  108. #nav ul.collapsed {   
  109.  display: none;   
  110. }   
  111. -->  
  112. </style>  
  113. </head>  
  114. <body>  
  115. <ul id="nav">  
  116.     <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a>  
  117.          <ul id="ChildMenu1" class="collapsed">  
  118.              <li><a href="#">first</a></li>  
  119.              <li><a href="#">second</a></li>  
  120.              <li><a href="#">third</a></li>  
  121.              <li><a href="#">forth</a></li>  
  122.              <li><a href="#">fifth</a></li>  
  123.          </ul>  
  124.     </li>  
  125.     <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a>  
  126.          <ul id="ChildMenu2" class="collapsed">  
  127.              <li><a href="#">first</a></li>  
  128.              <li><a href="#">second</a></li>  
  129.              <li><a href="#">third</a></li>  
  130.              <li><a href="#">forth</a></li>  
  131.              <li><a href="#">fifth</a></li>  
  132.          </ul>  
  133.     </li>  
  134.     <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a>  
  135.          <ul id="ChildMenu3" class="collapsed">  
  136.              <li><a href="#">first</a></li>  
  137.              <li><a href="#">second</a></li>  
  138.              <li><a href="#">third</a></li>  
  139.              <li><a href="#">forth</a></li>  
  140.              <li><a href="#">fifth</a></li>  
  141.          </ul>  
  142.     </li>  
  143.     <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a>  
  144.          <ul id="ChildMenu4" class="collapsed">  
  145.              <li><a href="#">first</a></li>  
  146.              <li><a href="#">second</a></li>  
  147.              <li><a href="#">third</a></li>  
  148.              <li><a href="#">forth</a></li>  
  149.              <li><a href="#">fifth</a></li>  
  150.          </ul>  
  151.     </li>  
  152. </ul>  
  153. </body>  
  154. </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

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