采用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 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
网站上面有这种切换效果
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发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
详解python里的命名规范
2018/07/16 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
利用python实现汉诺塔游戏
2021/03/01 Python
成品仓管员工作职责
2013/12/29 职场文书
导游实习生自荐书
2014/01/28 职场文书
房地产营销策划方案
2014/02/08 职场文书
运动会通讯稿500字
2014/02/20 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
节电标语大全
2014/06/23 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
家庭困难证明
2014/10/12 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript