css鼠标经过时下拉显示内容

基础概念

CSS鼠标经过时下拉显示内容是一种常见的网页交互效果，通常用于导航菜单或信息展示。通过CSS的:hover伪类选择器，可以实现当鼠标悬停在某个元素上时，显示或隐藏其子元素。

类型

导航菜单：常见的下拉菜单，当鼠标悬停在菜单项上时，显示子菜单。
信息提示：鼠标悬停在某个元素上时，显示详细信息或提示。

应用场景

网站导航：用于网站的顶部导航栏，提供多级菜单。
工具提示：在用户需要了解更多信息时，提供简短的提示信息。
动态效果：增强页面的动态效果，提升用户体验。

示例代码

以下是一个简单的CSS鼠标经过时下拉显示内容的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Dropdown</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>菜单</button>
        <div class="dropdown-content">
            <a href="#">子菜单1</a>
            <a href="#">子菜单2</a>
            <a href="#">子菜单3</a>
        </div>
    </div>
</body>
</html>