下拉菜单

最新推荐文章于 2023-09-15 17:14:12 发布

有在学习了

最新推荐文章于 2023-09-15 17:14:12 发布

阅读量98

点赞数

分类专栏：微信小程序文章标签： CSS 下拉菜单悬停效果交互设计 HTML

本文链接：https://blog.csdn.net/qq_51213025/article/details/112877545

版权

微信小程序专栏收录该内容

33 篇文章 1 订阅

订阅专栏

下拉菜单

<!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>
        * {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
        .one {
            border: 1px solid red;
            width: 100px;
            height: 200px;
            float: left;
        }
        .one p {
            display:none;
            background-color: burlywood;
            width: 200px;
        }
        .one p:hover {
            color: chartreuse;
            background-color: cornflowerblue;
        }
        .one a {
            display: block;
            background-color: rgb(229, 52, 245);
            font-size: 40px;
        }

        ***## one中的a属性添加鼠标移动到a上变色效果***
        .one a:hover {
            color: chartreuse;
            background-color: cornflowerblue;
        }
        .one:hover p {
            display: block;
        }
        .two {
            border: 1px solid red;
            width: 100px;
            height: 52px;
            float: left;
        }
        .two p {
            display:none;
            background-color: rgb(0, 247, 41);
        }
        .two p:hover {
            color: chartreuse;
            background-color: cornflowerblue;
        }
        .two a {
            display: block;
            background-color: rgb(229, 52, 245);
            font-size: 40px;
        }
        .two a:hover {
            color: chartreuse;
            background-color: cornflowerblue;
        }
        .two:hover p {
            display: block;
        }
    </style>
</head>
<body>
    <div class="one">
        <a>就是</a>
        <p>是吗</p>
        <p>安装</p>
        <p>也许</p>
    </div>
    <div class="two">
        <a>就是</a>
        <!-- <p>是吗</p>
        <p>安装</p>
        <p>也许</p> -->
    </div>
    
</body>
</html>

在这里插入图片描述

有在学习了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单

下拉菜单<!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> * {
复制链接

扫一扫