采用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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
VUE实现图片验证码功能
Nov 18 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
加强版phplib的DB类
2008/03/31 PHP
服务器web工具 php环境下
2010/12/29 PHP
用php解析html的实现代码
2011/08/08 PHP
splice slice区别
2006/10/09 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
上班看电影检讨书
2014/02/12 职场文书
廉洁校园实施方案
2014/05/25 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
运动会运动员赞词
2015/07/22 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers