普通的横向下拉菜单

HTML中的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="CSS.css" rel="stylesheet" />
    <script src="JS.js"></script>
</head>
<body>
    <ul id="du1">
        <li class="cl1"><div class="div1"></div></li>
        <li class="cl1"><div class="div1"></div></li>
        <li class="cl1"><div class="div1"></div></li>
    </ul>
</body>
</html>

CSS中的代码

* {
    margin: 0px;
    padding: 0px;
}

#du1 {
    position: relative;
    top: 100px;
    left: 100px;
     300px;
    height: 50px;
    background-color: aqua;
}

.cl1 {
    position: relative;
    margin-top: 10px;
     80px;
    height: 30px;
    background-color: red;
    margin-left: 15px;
    list-style-type: none;
    float: left;
}

.div1 {
    position: relative;
    margin-top: 32px;
     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";
        }
    }
};