HTML中的代码

 

CSS中的代码

* {    margin: 0px;    padding: 0px;}#du1 {    position: relative;    top: 100px;    left: 100px;    width: 300px;    height: 50px;    background-color: aqua;}.cl1 {    position: relative;    margin-top: 10px;    width: 80px;    height: 30px;    background-color: red;    margin-left: 15px;    list-style-type: none;    float: left;}.div1 {    position: relative;    margin-top: 32px;    width: 80px;    height: 90px;    background-color: navy;    display: none;}

　　

JS中的代码

window.onload = function () {    var lis = document.getElementsByClassName("cl1");    for (var i = 0; i < lis.length; i++) {        lis[i].onmouseover = function () {            var div = this.getElementsByClassName("div1");            div[0].style.display = "block";        }        lis[i].onmouseout = function () {            var div = this.getElementsByClassName("div1");            div[0].style.display = "none";        }    }};