[css] 小案例---隐藏后的菜单，划过后显示

最新推荐文章于 2024-06-26 11:25:57 发布

533_

最新推荐文章于 2024-06-26 11:25:57 发布

阅读量212

点赞数

分类专栏： # css

本文链接：https://blog.csdn.net/qq_14993591/article/details/119414912

版权

css

css 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

类似二级菜单案例，
本身二级菜单不显示，划过一级菜单后，显示二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .red {
            width: 300px;
            height: 300px;
            background-color: rgb(170, 53, 53);
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: rgb(137, 206, 48);
            display: none;
        }
        .red:hover>.green {
            display: block;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="green"> </div>
</div>
</body>
</html>