Javascript实现简单的下拉二级菜单
来源:互联网 发布:韩国女演员 知乎 编辑:程序博客网 时间:2024/05/05 01:28
在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/
<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>
0 0
- Javascript实现简单的下拉二级菜单
- javascript实现一个简单的二级菜单
- [js]实现简单的省市二级联动下拉选择菜单
- JavaScript实现简单的下拉菜单
- Javascript实现简单的下拉菜单
- javascript实现二级下拉框(简单的方式)
- 一个简单的二级下拉菜单
- 简单的二级下拉菜单(转)
- HTML+CSS+JavaScript实现简单的二级菜单
- 小菜学习日记—html实现简单下拉二级菜单
- 实现一个简单的Javascript级联下拉菜单
- JQuery 实现二级下拉菜单
- 二级下拉菜单实现代码
- javascript-下拉菜单的实现
- 简单二级菜单实现
- 简单的下拉菜单实现
- javascript支持区号输入的省市二级联动下拉菜单
- 二级下拉菜单关联(数据库版)的简单方法
- php分页类 + 应用示例{很简单的}
- HDU 2647 Reward(拓扑排序)
- 哼一首歌,等日落
- 决策树
- jQuery 实时汇率转换 悬浮层
- Javascript实现简单的下拉二级菜单
- 老公扭脸看了我一眼说“上一辈子你也是这样说的……
- LinQ开篇介绍
- disucz x模板安装常见问题
- 顶尖程序员
- Android应用优化(2)View cache的优化
- 做对别人不利的事,就会搬起石头砸自己的脚
- Android关于WebService的开发的一些问题
- 薪资的意义