您的位置：首页 > Web前端 > JavaScript

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

2014-06-14 21:55 585 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航