普通的横向下拉菜单

Posted 露西&哈特菲利亚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了普通的横向下拉菜单相关的知识,希望对你有一定的参考价值。

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;
    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";
        }
    }
};

 

以上是关于普通的横向下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

iPad横向模式下的下拉菜单触发

html 横向导航栏制作求助

横向排列html代码

RecyclerView侧滑菜单,滑动删除,长按拖拽,下拉刷新上拉加载

C# menustrip下拉菜单自动收回问题

下拉菜单:‘点击外面关闭’的解决方案