下拉菜单

<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .nav {
        width: 1500px;
        height: 40px;
        background-color: rgb(132, 204, 180);
        display: flex;
        justify-content: center;
    }

    .content {
        width: 600px;
        height: 40px;
        background-color: rgb(185, 255, 232);
        display: flex;
    }

    .content .item {
        height: 40px;
        width: 600px;
        text-align: center;
        line-height: 40px;
        background-color: rgb(53, 173, 133);
    }

    li {
        list-style: none;
        border-right: 1px solid #fff;
    }

    .children {
        background-color: rgb(90, 189, 156);
    }
    .content .item{
        position: relative;
    }
    .children{
        position: absolute;
        display: none;
    }
    .children li{
        width: 150px;height: 100%;
    }

</style>

<body>
    <div class="nav">
        <ul class="content">
            <li class="item">首页</li>
            <li class="item">文章
                <ul class="children">
                    <li>我的文章</li>
                    <li>发表文章</li>
                </ul>
            </li>
            <li class="item">相册
                <ul class="children">
                    <li>我的相册</li>
                    <li>上传照片</li>
                </ul>
            </li>
            <li class="item">消息
                <ul class="children">
                    <li>我的私信</li>
                    <li>我的留言</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        let menu1 = document.getElementsByClassName("item")
        for (let i = 0; i < menu1.length; i++) {
            menu1[i].onmouseenter = function () {
                console.log("用户进入了", i, "的菜单")
                let child = menu1[i].getElementsByClassName("children")
                if (child.length > 0) {
                    child[0].style.display = "block"
                }
            }
            menu1[i].onmouseleave = function () {
                let child = menu1[i].getElementsByClassName("children")
                if (child.length > 0) {
                    child[0].style.display = "none"
                }
            }
        }
    </script>
</body>

</html>
推荐阅读更多精彩内容
