<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.ul{
width:500px;
background: #999;
overflow: hidden;
padding-bottom: 10px;
}
.ul li{
float:left;
width:100px;
margin-left:20px;
height:50px;
line-height: 50px;
text-align: center;
background: #000;
color:#fff;
margin-top:10px;
}
div{
width:500px;
height:50px;
border:1px solid #000;
}
.ul>li>ul{
display:none;
}
</style>
<body>
<ul class='ul'>
<li>
1
<ul>
<li>春节</li>
</ul>
</li>
<li>
2
<ul>
<li>二月</li>
</ul>
</li>
<li>
3
<ul>
<li>三八妇女节</li>
</ul>
</li>
<li>
4
<ul>
<li>4444444444</li>
</ul>
</li>
<li>
5
<ul>
<li>五月劳动节</li>
</ul>
</li>
<li>
6
<ul>
<li>666666666</li>
</ul>
</li>
<li>
7
<ul>
<li>777777777</li>
</ul>
</li>
<li>
8
<ul>
<li>888888888</li>
</ul>
</li>
<li>
9
<ul>
<li>999999999</li>
</ul>
</li>
<li>
10
<ul>
<li>十月一日国庆节</li>
</ul>
</li>
<li>
11
<ul>
<li>11111111111</li>
</ul>
</li>
<li>
12
<ul>
<li>1212121212</li>
</ul>
</li>
</ul>
<div></div>
<script>
var li = document.querySelectorAll('.ul>li');
var div = document.querySelector('div');
for(var i = 0; i < li.length; i++) {
li[i].onmouseover = function() {
this.style.background = '#fff';
this.style.color = '#f00';
div.innerHTML = this.children[0].children[0].innerHTML;
}
li[i].onmouseout = function() {
this.style.background = '';
this.style.color = '';
}
}
</script>
网友评论