下拉菜单（js小案例）

最新推荐文章于 2024-05-09 00:14:24 发布

~嘘~禁止想象~

最新推荐文章于 2024-05-09 00:14:24 发布

阅读量430

点赞数 2

分类专栏： # JavaScript小练习前端文章标签： js

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105736861

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
            display: block;
            content: '';
            clear: both;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: brown;
        }
        
        li,
        ul {
            list-style: none;
            box-sizing: border-box;
        }
        
        ul>li.block {
            float: left;
            width: 50px;
        }
        
        ul>li.block>ul {
            display: none;
        }
        
        ul>li.block li {
            border: 1px solid #008c8c;
            cursor: pointer;
        }
        
        ul>li.block li:hover {
            background-color: wheat;
        }
    </style>
</head>

<body>
    <ul class="nav clearfix">
        <li class="block">
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="block">
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="block">
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="block">
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector('.nav');/* 获取nav */
        var lis = nav.children;/* 获取nav的子元素孩子 */
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {/* 当鼠标经过 */
                this.children[1].style.display = "block";/* 子元素的第一个孩子display=“block” */
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = "none";/* 鼠标移开display = “none” */
            }
        }
    </script>
</body>

</html>

~嘘~禁止想象~

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单（js小案例）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫