找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发javascript鼠标经过弹出二级导航菜单

2019-01-25 分类：JavaScript 阅读(692) 评论(0)
web前端开发电子书的下载
前端开发个人总结ppt模板下载
前端开发汇报总结ppt模板下载

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
    </head>
    <style>
        body,
        h3,
        p,
        div,
        ul,
        li {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #ccc;
        }
        a {
            color: #fff;
        }
        ul > li {
            list-style: none;
        }
        #box {
            color: #fff;
            line-height: 40px;
        }
        #box > ul {
            clear: both;
            height: 40px;
            background-color: #f00;
            padding-left: 300px;
        }
        #box > ul > li {
            float: left;
            position: relative;
            text-align: center;
            width: 100px;
        }
        #box > ul > li > ul {
            display: none;
            position: absolute;
            top: 40px;
            left: 0px;
            width: 100px;
            text-align: center;
            background-color: #333;
        }
        #box > ul > li:hover {
            background-color: #333;
        }
        #box > ul > li > ul > li:hover {
            background-color: #666;
        }
        #box > ul > li.active > ul {
            display: block;
        }
    </style>
    <body>
        <div id=”box”>
            <ul>
                <li class=””>
                    <h3>标签一</h3>
                    <ul>
                        <li><a href=”javascript:;”>1</a></li>
                        <li><a href=”javascript:;”>2</a></li>
                        <li><a href=”javascript:;”>3</a></li>
                    </ul>
                </li>
                <li>
                    <h3>标签2</h3>
                    <ul>
                        <li><a href=”javascript:;”>1</a></li>
                        <li><a href=”javascript:;”>2</a></li>
                        <li><a href=”javascript:;”>3</a></li>
                    </ul>
                </li>
                <li>
                    <h3>标签3</h3>
                    <ul>
                        <li><a href=”javascript:;”>1</a></li>
                        <li><a href=”javascript:;”>2</a></li>
                        <li><a href=”javascript:;”>3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <script>
            var lis = document.getElementById(‘box’).querySelectorAll(‘ul>li’)
            var uls = document
                .getElementById(‘box’)
                .querySelectorAll(‘ul>li>ul’)
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function() {
                    this.classList.add(‘active’)
                }
                lis[i].onmouseout = function() {
                    this.classList.remove(‘active’)
                }
            }
        </script>
    </body>
</html>
豆瓣网前端首页实战开发 打包下载
前端开发神器中文版下载
idea下载安装前端开发
赞(0)
前端开发者 » 前端开发javascript鼠标经过弹出二级导航菜单
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论