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

最新推荐文章于 2024-08-24 09:00:00 发布

嘉轩哥

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量5.6k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/ZhaZha__Hui/article/details/108059955

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

效果图：
在这里插入图片描述
下拉效果：

实现要点：
菜单内容：无序列表，居中
菜单定位：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>