新浪下拉菜单案例

最新推荐文章于 2024-03-21 03:48:40 发布

Just-Lsy

最新推荐文章于 2024-03-21 03:48:40 发布

阅读量82

点赞数

分类专栏：笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_59030524/article/details/122283447

版权

笔记专栏收录该内容

69 篇文章 6 订阅

订阅专栏

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            display: inline-block;
            background-color: #eee;
            width: 90px;
            height: 50px;
            display: inline-block;
            line-height: 50px;
            padding-left: 20px;
            text-decoration: none;
        }

        li {
            list-style: none;
            color: #000;
        }

        ul li {
            width: 88px;
            height: 40px;
            line-height: 40px;
            color: #000;
            border: 1px solid rgb(221, 221, 205);
            border-top: none;
            padding-left: 20px;
        }

        ul li:hover {
            background-color: rgb(227, 228, 213);
            color: orange;
        }

        ul {
            width: 110px;
            display: none;
        }
    </style>
</head>

<body>
    <p>微博</p>
    <ul>
        <li>私信</li>
        <li>评论</li>
        <li>@我</li>
    </ul>

    <script>
        var p = document.querySelector('p');
        var ul = document.querySelector('ul');
        p.onmouseover = function () {
            p.style.color = 'orange';
            ul.style.display = 'block';
        }
        p.onmouseout = function () {
            p.style.color = '#000';
            ul.style.display = 'none';
        }
        ul.onmouseover = function () {
            ul.style.display = 'block';
        }
        ul.onmouseout = function () {
            ul.style.display = 'none';
        }



    </script>
</body>

Just-Lsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新浪下拉菜单案例

<style> * { margin: 0; padding: 0; } p { display: inline-block; background-color: #eee; width: 90px; height: 50px; display: inline-block; .
复制链接

扫一扫