<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js入门练习——菜单</title>
<link rel="stylesheet" type="text/css" href="../css/basic.css" />
<script type="text/javascript">
window.onload = function()
{
var oMenu1 = document.getElementById("menu1");/*获取第1个列表ul*/
var oLi = oMenu1.getElementsByTagName("li");/*获取所有的li*/
var i = 0;
for(i = 0;i<oLi.length;i++)
{
/*功能一:鼠标经过,添加当前效果,子列表显示*/
oLi[i].onmouseover = function(){/*鼠标经过,为li添加当前效果,子列表显示*/
if(this.children.length > 1){
this.className = "active";
this.children[2].style.display = "block";
}
}
/*功能二:鼠标离开,清除当前效果,子列表隐藏*/
oLi[i].onmouseout = function(){
this.className = "";
this.children[2].style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="menu">
<ul class="menu1" id="menu1">
<li><a href="###">Home</a></li>
<li>
<a href="###">web</a>
<em>》</em>
<ul class="menu2">
<li><a href="###">html</a></li>
<li><a href="###">css</a></li>
<li><a href="###">jquery</a></li>
<li>
<a href="###">javascript</a>
<em>》</em>
<ul class="menu3">
<li><a href="###">javascript基础</a></li>
<li><a href="###">BOM</a></li>
<li><a href="###">DOM</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">javascript</a></li>
<li><a href="###">Contact</a></li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body,ul,li{
margin:0;
padding:0;
}
.menu{
margin:20px auto;
width:600px;
}
ul{list-style:none;}
a{
text-decoration:none;
color:#000;
}
.menu1{
width:160px;
border:1px solid #ddd;
}
.menu1 li{
position:relative;
padding-left:20px;
width:140px;
line-height:42px;
}
.menu1 li:hover{background:#ccc;}
.menu2,.menu3{
display:none;
position:absolute;
top:-1px;
left:160px;
border:1px solid #ddd;
}
.menu1 li,.menu2 li,.menu3 li{border-bottom:1px dashed #ccc;}
.menu1 li:last-child,.menu2 li:last-child,.menu3 li:last-child{border:none;}
em{
font-style:normal;
float:right;
}
.active,li.active:hover{background:#C9F;}