js下拉菜单

最新推荐文章于 2022-04-09 10:45:23 发布

爬楼梯的小新

最新推荐文章于 2022-04-09 10:45:23 发布

阅读量628

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122577256

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

样式思路：用nav包裹整个菜单栏 li里包ul 要用这种样式可以更好的使用节点children的方式做下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪下拉菜单</title>
    <style>
        a {
            color: #000;
            text-decoration: none;
        }
        
        li {
            list-style: none;
        }
        
        .nav {
            float: left;
            width: 500px;
            height: 250px;
        }
        
        .nav li a {
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        .nav .one {
            float: left;
            position: relative;
        }
        
        .nav .one .uls {
            position: absolute;
            top: 50px;
            left: 0;
            width: 101px;
            text-align: center;
            padding-left: 0;
            text-align: center;
        }
        
        .nav .one .uls li a:hover {
            background-color: #fff6dc;
        }
        
        .nav .one a:nth-child(1):hover,
        .one a:nth-child(2):hover,
        .one a:nth-child(3):hover {
            background-color: #ccc;
        }
        
        .nav .one .uls li {
            display: inline-block;
            border: 1px solid #d4ba6c;
            border-top: 0;
        }
        
        .uls {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="one">
            <a href="#">微博</a>
            <ul class="uls">
                <li><a href="#">私信1</a></li>
                <li><a href="#">评论1</a></li>
                <li><a href="#">艾特1</a></li>
            </ul>
        </li>
        <li class="one">
            <a href="#">微博</a>
            <ul class="uls">
                <li><a href="#">私信2</a></li>
                <li><a href="#">评论2</a></li>
                <li><a href="#">艾特2</a></li>
            </ul>
        </li>
        <li class="one">
            <a href="#">微博</a>
            <ul class="uls">
                <li><a href="#">私信3</a></li>
                <li><a href="#">评论3</a></li>
                <li><a href="#">艾特3</a></li>
            </ul>
        </li>
    </ul>
</body>
<script>
    var nav = document.querySelector('.nav');
    var lis = nav.children; //得到三个大li one
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.children[1].style.display = 'block'; //1是ul
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = 'none';
        }
        console.log(lis[i].children[0]); //索引号0是a标签
    }
</script>

</html>

如果不知道自己想要的东西索引号是几可以在for循环里打印一下

如果对于children子节点不是很了解看这里 js节点操作