Javascript实现简单二级下拉菜单实例
Javascript实现简单二级下拉菜单实例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:Menu#nav{list-style:none;text-align:center;}#navli{float:left...

复制代码 代码如下:

<span><!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>数 据 库

<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>前台脚本

<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>后台脚本

<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教程学习
编程开发子分类