采用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中出现乱码的处理心得
Dec 24 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
移动节点的jquery代码
Jan 13 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
移动端利用H5实现压缩图片上传功能
Mar 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实现curl模拟ftp上传的方法
2015/07/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python模拟实现斗地主发牌
2020/01/07 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
回门宴父母答谢词
2014/01/26 职场文书
青蓝工程实施方案
2014/03/27 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
尊师重教演讲稿
2014/09/04 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书