2025-03-31

<!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>
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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

    html {
        font-size: 10px;
    }
    .bg{
        width: 100%;
        height: 5rem;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
    }
    .nav{
        width: 100rem;
        height: 5rem;
        display: flex;
        justify-content: start;
        gap: 20px;
        list-style: none;
    }
    .nav > .item{
        width: 20rem;
        height: 5rem;
        padding: 1rem 5rem;
        position: relative;
        text-align: center;
        cursor: pointer;
        font-size: 18px;

    }
    .nav > .item:hover{
        background-color: #f2f2;
        color: #333;
        font-weight: 500;
    }
    .children{
        list-style: none;
        position: absolute;
        background-color: brown;
        display: none;
        left: 0;
        top: 5rem;
        padding: 1rem 2rem;
        background-color: aquamarine;
    }
    .children > li{
        line-height: 5rem;
    }
    .children > li:hover{
        background-color: #f2f2f1;
        color: #333;
    }

    </style>

</head>
<body>
    <div class="bg">
        <ul class="nav">
            <li class="item">主页
            </li>
            <li class="item">文章
                <ul class="children">
                    <li>我的文章</li>
                    <li>文章编写</li>
                    <li>发表文章</li>
                </ul>
            </li>
            <li class="item">相册
                <ul class="children">
                    <li>全部相册</li>
                    <li>私密相册</li>
                    <li>共享相册</li>
                </ul>
            </li>
            <li class="item">留言
                <ul class="children">
                    <li>我的留言</li>
                    <li>别人的留言</li>
                    <li>去留言</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        let _lis = document.getElementsByClassName("item")
        for (let i = 0; i < _lis.length; i++) {
            _lis[i].onmouseenter = function () {
                let _children = _lis[i].getElementsByClassName("children")
                if (_children.length > 0) {
                    let c = _children[0]
                    c.style.display = "block"
                }
            }
            _lis[i].onmouseleave = function () {
                let _children = _lis[i].getElementsByClassName("children")
                if (_children.length > 0) {
                    let c = _children[0]
                    c.style.display = "none"
                }
            }
        }
    </script>
</body>
</html>
2025-03-31

推荐阅读更多精彩内容
