CSS实现鼠标悬浮时下拉菜单栏功能

缺乏、安全感 2023-10-05 08:34 16阅读 0赞

**个人学习笔记，欢迎评论，虚心接受批评和建议。**

**效果图：**  
![在这里插入图片描述][20200817171333596.png_pic_center]  
**下拉效果：**  
![在这里插入图片描述][20200817171357912.png_pic_center]  
**实现要点：**  
菜单内容：无序列表，居中  
菜单定位：relative absolute（子元素li要根据菜单实现相对定位，父元素ul必须要实现任意定位（position））  
菜单背景：设置白色背景  
下拉效果：ul设置display：none，鼠标悬浮设置ul\{display:block\}，li设置悬浮背景颜色

<!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>
            *{padding: 0px;margin: 0px;}
            ul{list-style: none;}
            #menu{width: 90px;height: 20px;margin: 20px auto;border: black solid 1px;position: relative;
            background-color: white;text-align: center;}
            #menu ul{width: 90px;border:black 1px solid;position: absolute;left: -1px;top: 20px;
            background-color: white;display: none;}
            #content{text-align: center;}
            #menu:hover ul{display: block;}
            #menu ul li:hover{background-color: grey;}
        </style>
    </head>
    <body>
        <div id="menu">
            菜单
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
                <li>菜单四</li>
            </ul>
        </div>
        
        <p id="content">段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试</p>
    </body>
    </html>

[20200817171333596.png_pic_center]: https://img-blog.csdnimg.cn/20200817171333596.png#pic_center
[20200817171357912.png_pic_center]: https://img-blog.csdnimg.cn/20200817171357912.png#pic_center