js实现下拉框 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/
            background: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        #nav ul{/*去掉点点*/
            list-style: none;

        }
        #nav  ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
             float: left;
            line-height: 40px;
            text-align: center; 
            position: relative;/*给子ul定位用的*/
        }
        #nav  ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/
            text-decoration: none;
            color:#000;
            padding:0 10px;
            display: block;
        }
        #nav  ul li a:hover{
            color: #fff;
            background-color: #666;
        }
        #nav  ul li ul {
            position: absolute;/*相对于父li的位置进行定位*/
            left: 0;
            top:40px;
            display: none;
        }
        #nav  ul li ul li{
            float: none;
            background-color:#eee;
        }
    </style>
    <!--js代码-->
    <script>
    <!--显示-->
    function show(li){
        var sub=li.getElementsByTagName("ul")[0];
        sub.style.display="block";
    }
    <!--隐藏-->
    function hide(li){
        var sub=li.getElementsByTagName("ul")[0];
        sub.style.display="none";
    }
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <!--onmouseover onmouseout-->
            <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                </ul>
            </li>
            <li><a href="#">学习中心</a></li>
            <li><a href="#">经典案例</a></li>
            <li onmouseover="show(this)" onmouseout=""><a href="#">关于我们</a>
                <ul>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

在网上找到的，感觉挺有用，备份一下而已。

posted on 2019-05-12 19:42  zengsf  阅读(363)  评论(0)  编辑  收藏  举报

导航