linux社区爱心援助Linux认证系列教程业界动态站务新闻公司招聘网络学院网址大全LPI专题CISCO专题
设为首页
加入收藏
管理团队
JSP  
JAVA  
PERL  
 您的位置:首页 > 开发语言 > JavaScript >
栏目导栏
  php
  JSP
  ASP
  asp.net
  JAVA
  c/c++/c#
  perl
  JavaScript
  Basic
  Delphi
资料搜索
热门文章
·javascript 时间对象的格式化
·去掉字符串前后的空格
·javascript 事件监听机制
·javascript 事件调用顺序
·js刷新框架子页面的七种方法
·JavaScript:替换字符串
·IE下的JScript编程需注意的内存
·用javascript操作word文档
·Javascript中CTRL+回车提交表单
·JS 获取鼠标位置
·javascript判断Email地址是否有
·Javascript中Select的OnChange
·JS实现的滑动展开与折叠效果
·有分页功能的WEB打印
·Javascript实现窗口最大化的严
最新文章
·使用CSS改变表格边框样式
·为网页添加浮动广告
·判断表单中添加是否数字的JS与
·让浏览器状态栏动起来
·使用Javascript制作行间颜色间
·禁止用右键查看源代码
·网页侦测四法
·制作弹出公告窗口
·为网页添加特效
·网页中取消鼠标右键方法大全
·JavaScript 根据屏幕解析度显示
·如何实现浏览器上的右键菜单
·如何制作浮动广告
·让弹出窗口变得“体贴”一些
·JavaScript技巧:让网页自动穿上
Google
 
采用CSS和JS的下拉菜单的制作
[ 作者:  加入时间:2007-10-29 12:17:36  来自:Linux联盟收集整理 ]
  <script language="javascript">MCiLinux联盟
// JavaScript DocumentMCiLinux联盟
startList = function() {MCiLinux联盟
if (document.all&&document.getElementById) {MCiLinux联盟
navRoot = document.getElementById("nav");MCiLinux联盟
for (i=0; i<navRoot.childNodes.length; i++) {MCiLinux联盟
node = navRoot.childNodes[i];MCiLinux联盟
if (node.nodeName=="LI") {MCiLinux联盟
node.onmouseover=function() {MCiLinux联盟
this.className+=" over";MCiLinux联盟
 }MCiLinux联盟
 node.onmouseout=function() {MCiLinux联盟
 this.className=this.className.replace(" over", "");MCiLinux联盟
 }MCiLinux联盟
 }MCiLinux联盟
 }MCiLinux联盟
 }MCiLinux联盟
}MCiLinux联盟
window.onload=startList;MCiLinux联盟
</script>MCiLinux联盟
<style type="text/css">MCiLinux联盟
<!--MCiLinux联盟
body {MCiLinux联盟
  font: normal 11px verdana;MCiLinux联盟
  }MCiLinux联盟
ul {MCiLinux联盟
  margin: 0;MCiLinux联盟
  padding: 0;MCiLinux联盟
  list-style: none;MCiLinux联盟
  width: 150px; /* Width of Menu Items */MCiLinux联盟
  border-bottom: 1px solid #ccc;MCiLinux联盟
  }MCiLinux联盟
  MCiLinux联盟
ul li {MCiLinux联盟
  position: relative;MCiLinux联盟
  }MCiLinux联盟
  MCiLinux联盟
li ul {MCiLinux联盟
  position: absolute;MCiLinux联盟
  left: 149px; /* Set 1px less than menu width */MCiLinux联盟
  top: 0;MCiLinux联盟
  display: none;MCiLinux联盟
  }MCiLinux联盟
/* Styles for Menu Items */MCiLinux联盟
ul li a {MCiLinux联盟
  display: block;MCiLinux联盟
  text-decoration: none;MCiLinux联盟
  color: #777;MCiLinux联盟
  background: #fff; /* IE6 Bug */MCiLinux联盟
  padding: 5px;MCiLinux联盟
  border: 1px solid #ccc; /* IE6 Bug */MCiLinux联盟
  border-bottom: 0;MCiLinux联盟
  }MCiLinux联盟
  MCiLinux联盟
/* Holly Hack. IE Requirement */MCiLinux联盟
* html ul li { float: left; height: 1%; }MCiLinux联盟
* html ul li a { height: 1%; }MCiLinux联盟
/* End */MCiLinux联盟
li:hover ul, li.over ul { display: block; } /* The magic */MCiLinux联盟
-->MCiLinux联盟
</style>MCiLinux联盟
<ul id="nav"> MCiLinux联盟
 <li><a href="#">Home</a></li> MCiLinux联盟
 <li><a href="#">About</a> MCiLinux联盟
 <ul> MCiLinux联盟
 <li><a href="#">History</a></li> MCiLinux联盟
 <li><a href="#">Team</a></li> MCiLinux联盟
 <li><a href="#">Offices</a></li> MCiLinux联盟
 </ul> MCiLinux联盟
 </li> MCiLinux联盟
 <li><a href="#">Services</a> MCiLinux联盟
 <ul> MCiLinux联盟
 <li><a href="#">Web Design</a></li> MCiLinux联盟
 <li><a href="#">Internet Marketing</a></li> MCiLinux联盟
 <li><a href="#">Hosting</a></li> MCiLinux联盟
 <li><a href="#">Domain Names</a></li> MCiLinux联盟
 <li><a href="#">Broadband</a></li> MCiLinux联盟
 </ul> MCiLinux联盟
 </li> MCiLinux联盟
 <li><a href="#">Contact Us</a> MCiLinux联盟
 <ul> MCiLinux联盟
 <li><a href="#">United Kingdom</a></li> MCiLinux联盟
 <li><a href="#">France</a></li> MCiLinux联盟
 <li><a href="#">USA</a></li> MCiLinux联盟
 <li><a href="#">Australia</a></li> MCiLinux联盟
 </ul> MCiLinux联盟
 </li> MCiLinux联盟
</ul> MCiLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
评论】【加入收藏夹】【 】【打印】【关闭
※ 相关链接
无相关信息