<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
#list{
width:200px;
float:left;
margin-left:100px;
text-align:center;
line-height:50px;
}
#list li{
width:100%;
height:50px;
border-bottom: 1px solid black;
box-sizing:border-box;
background-color:pink;
list-style:none;
}
#box{
float:left;
width:500px;
height:500px;
font-size:100px;
overflow:hidden;
text-align:center;
line-height:500px;
}
#box div{
width:500px;
height:500px;
background-color:#000;
display:none;
color:#fff;
}
</style>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script>
//获取元素
var ul = document.getElementById('list');
var aLi = document.querySelectorAll('#list li');
var aDiv = document.querySelectorAll('#box div');
//当鼠标移入一级菜单时，对应的二级菜单显示
for(var i = 0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for(var i =0;i <aDiv.length;i++){
aDiv[i].style.display = 'none';
}
aDiv[this.index].style.display='block';
console.log(this.index);
}
}
//当鼠标离开一级菜单的时候，二级菜单隐藏
ul.onmouseout = function(){
for(var i=0;i < aDiv.length; i++){
aDiv[i].style.display = 'none';
}
}
//当鼠标移入二级菜单的时候，对应的div显示
for(var i =0; i<aDiv.length;i++){
aDiv[i].onmouseover = function(){
this.style.display = 'block';
}
}
//当鼠标离开二级菜单的时候，二级菜单隐藏
for(var i= 0;i < aDiv.length;i++){
aDiv[i].onmouseout = function(){
this.style.display = 'none';
}
}
</script>
</body>
</html>
