标签：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用HTML和CSS实现下拉列表</title>
<style>
*{margin:0;padding:0;}
#nav{background-color:#eee;width:500px;height:40px;margin:0 auto;}
ul{list-style-type:none;}
ul li{float:left;line-height:40px;text-align:center;position:relative;width:100px;}
a{text-decoration:none;color:#000;display:block;height:40px;width:100px;}
a:hover{color:#fff;background-color:#666;}
ul li ul li{float:none;border-left:none;background-color:#eee;margin-top:2px;width:100px;}
ul li ul{width:90px;position:absolute;left:0px;top:40px;display:none;}
</style>
<script type="text/javascript">
//定义一个函数
function showsubmenu(li){
//找到li下的第一个ul，存为submenu
var submenu=li.getElementsByTagName("ul")[0];
//设置submenu的属性为显示状态
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
//设置submenu的属性为隐藏状态
submenu.style.display="none";
}
</script>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#">首页</a></li>
<!--设定onmouseover和onmousuout事件，分别调用js中的两个函数，传参为this，这里this代表li元素-->
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">经典案例</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">最新版本</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/webljx/p/5031380.html
