Javascript实现简单二级下拉菜单实例


Posted in Javascript onJune 15, 2014
<span style="font-size:14px;"><!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="texthtml;charset=utf-8"> 
<title>Menu</title> 
<style type="text/css"> 
#nav 
{ 
list-style: none; 
text-align: center; 
} 
#nav li 
{ 
float: left; 
width: 100px; 
color: white; 
background-color: #3E3E3E; 
} 
#menu 
{ 
list-style: none; 
padding: 5px; 
display: none; 
margin-left: -5px; 
margin-top: -5px; 
} 
#menu li 
{ 
background-color: #ccc; 
width: 100px; 
text-align: left; 
padding-left: 10px; 
} 
#menu li a:link 
{ 
text-decoration: none; 
display: block; 
} 
#menu li a:hover 
{ 
background-color:#3E3E3E; 
color: white 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li class="child">数 据 库 
<ul id="menu"> 
<li><a href="http://blog.csdn.net/u011043843">MySQL</a></li> 
<li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li> 
<li><a href="http://blog.csdn.net/u011043843">Oracle</a></li> 
<li><a href="http://blog.csdn.net/u011043843">DB2</a></li> 
</ul> 
</li> 
<li class="child">前台脚本 
<ul id="menu"> 
<li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li> 
<li><a href="http://blog.csdn.net/u011043843">Ruby</a></li> 
<li><a href="http://blog.csdn.net/u011043843">HTML</a></li> 
<li><a href="http://blog.csdn.net/u011043843">Python</a></li> 
</ul> 
</li> 
<li class="child">后台脚本 
<ul id="menu"> 
<li><a href="http://blog.csdn.net/u011043843">PHP</a></li> 
<li><a href="http://blog.csdn.net/u011043843">ASP</a></li> 
<li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li> 
<li><a href="http://blog.csdn.net/u011043843">JSP</a></li> 
</ul> 
</li> 
</ul> 
<script type="text/javascript"> 
var lis = document.getElementById("nav").getElementsByTagName('li'); 
var i = 0; for( i = 0; i < lis.length; i++) 
{ 
if(lis[i].className == "child") 
{ 
lis[i].onmouseover = function() 
{ 
var ulObj1 = this.getElementsByTagName('ul')[0]; 
ulObj1.style.display = "block"; 
this.style.backgroundColor="#ccc"; 
this.style.color="black"; 
} 
} 
lis[i].onmouseout = function() 
{ 
var ulObj1 = this.getElementsByTagName('ul')[0]; //this是HTMLElement对象 
ulObj1.style.display = "none"; 
this.style.backgroundColor="#3E3E3E"; 
this.style.color="white"; 
} 
} 
</script> 
</body> 
</html></span>
Javascript 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
js 处理URL实用技巧
Nov 23 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
Element Input组件分析小结
Oct 11 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
jquery实现倒计时代码分享
Jun 13 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python 循环数据赋值实例
2019/12/02 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python与js主要区别点总结
2020/09/13 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
自我评价格式
2014/01/06 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
甜品店创业计划书
2014/08/14 职场文书
经理助理岗位职责
2015/02/02 职场文书
招商银行工作证明
2015/06/17 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA