采用CSS和JS,刚好我最近有个站点要用到下拉菜单!


Posted in Javascript onJune 26, 2006

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</title>
<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
}
window.onload=startList;
</script>
<style type="text/css">
<!--
body {
  font: normal 11px verdana;
  }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }

ul li {
  position: relative;
  }

li ul {
  position: absolute;
  left: 149px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom: 0;
  }

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
</head>

<body>
<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a>
 <ul>
 <li><a href="#">History</a></li>
 <li><a href="#">Team</a></li>
 <li><a href="#">Offices</a></li>
 </ul>
 </li>
 <li><a href="#">Services</a>
 <ul>
 <li><a href="#">Web Design</a></li>
 <li><a href="#">Internet Marketing</a></li>
 <li><a href="#">Hosting</a></li>
 <li><a href="#">Domain Names</a></li>
 <li><a href="#">Broadband</a></li>
 </ul>
 </li>
 <li><a href="#">Contact Us</a>
 <ul>
 <li><a href="#">United Kingdom</a></li>
 <li><a href="#">France</a></li>
 <li><a href="#">USA</a></li>
 <li><a href="#">Australia</a></li>
 </ul>
 </li>

</ul>
</body>
</html>

 

Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue获取form表单的值示例
Oct 29 Javascript
网站上面有这种切换效果
Jun 26 #Javascript
accesskey 提交
Jun 26 #Javascript
Ctrl+Enter提交内容信息
Jun 26 #Javascript
漂亮的仿flash菜单,来自蓝色经典
Jun 26 #Javascript
经典的带阴影的可拖动的浮动层
Jun 26 #Javascript
些很实用且必用的小脚本代码
Jun 26 #Javascript
如果文字过长,则将过长的部分变成省略号显示
Jun 26 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jquery tools之tooltip
2009/07/25 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python学习之编写查询ip程序
2016/02/27 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
银行学习十八大感想
2014/01/11 职场文书
文案策划求职信
2014/04/14 职场文书
交通安全标语
2014/06/06 职场文书
小学生读书活动总结
2014/06/30 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
新闻人物通讯稿
2014/10/09 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
MySQL开启事务的方式
2021/06/26 MySQL
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
python热力图实现的完整实例
2022/06/25 Python