网页中下拉菜单的实现

最新推荐文章于 2023-10-31 22:10:07 发布

馍馍菜

最新推荐文章于 2023-10-31 22:10:07 发布

阅读量5.5k

点赞数 7

分类专栏：前端文章标签：鼠标 css

本文链接：https://blog.csdn.net/yun66666/article/details/78096280

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用css样式中的hover选择器，来设置鼠标悬停的效果
其定义和用法：
:hover在鼠标移到链接上时添加的特殊样式。
:hover 选择器器可用于所有元素，不仅是链接。
再使用css的display属性的none值来实现下拉菜单的隐藏（display：none；）
用display的block属性值来实现下拉菜单的显示
实现效果如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a{
                width: 205px;

            }

            .b{
                width: 200px;
                height: 50px;
                background-color: limegreen;
                text-align: center;
                line-height: 50px;
                color: #ffffff;
            }

            .c{
                width: 200px;
                height: 300px;
                background-color: gainsboro;
                display: none;
                /*visibility: hidden;*/
            }

            ul{
                list-style: none;
                margin-left: -40px; 
            }
            ul li{
                line-height: 50px;
                display: block;
                width: 200px;
                text-align: center;
            }

            .a:hover{
                cursor: pointer;
            }

            .a:hover .c{
                display: block;
            }

            .a:hover .b{
                background-color: green;
            }

            li:hover{
                background-color: gray;
                color: #FFFFFF;
            }

        </style>
    </head>
    <body>

        <div class="a">

            <div class="b">
                关于我们
            </div>

            <div class="c">
                <ul>
                    <li>公司简介</li>
                    <li>董事长致辞</li>
                    <li>企业文化</li>
                    <li>团队风采</li>
                </ul>
            </div>

        </div>

    </body>
</html>

馍馍菜

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
网页中下拉菜单的实现

使用css样式中的hover选择器，来设置鼠标悬停的效果其定义和用法： :hover在鼠标移到链接上时添加的特殊样式。 :hover 选择器器可用于所有元素，不仅是链接。再使用css的display属性的none值来实现下拉菜单的隐藏（display：none；）用display的block属性值来实现下拉菜单的显示实现效果如下： <!DOCTYPE html><
复制链接

扫一扫