萬年歷
<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>春節(jié)</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? 2
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>二月二龍?zhí)ь^</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? 3
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>三八婦女節(jié)</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? 4
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>4444444444</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? 5
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>五月勞動節(jié)</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>十月一日國慶節(jié)</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 = '';
? ? ? ? ? ? }
? ? ? ? }
