html

效果

scss样式

html

源码

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/index.css" type="text/css"/>
</head>
<body>
    <div id="root">
        <div style="height: 30px;">
            <div class="a">
                <div class="b">
                    下拉列表
                </div>
                <div class="c">
                    <a v-for="(item, index) in x" :key="index">{{item.name}}</a>
                </div>
            </div>
            <div class="a">
                <div class="b">
                    下拉列表
                </div>
                <div v-for="(item, index) in x" :key="index" class="c">
                    <a v-for="(item, index) in x" :key="index">{{item.name}}</a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm =new Vue({
            el:'#root',
            data() {
                return {
                    x:[
                        {
                            id:1,
                            name:"list1"
                        },
                        {
                            id:2,
                            name:"list2"
                        },
                        {
                            id:3,
                            name:"list3"
                        }
                    ]
                }
            },
        })
    </script>

</body>
</html>

.a{
    width: 100px;
    height: 30px;
    background-color: #fff;
    position: relative;
    display: inline-block;
    .b{
        width: 100px;
        height: 30px;
    }
    .c{
        display: none;
        position:absolute;
        a{  
            width: 100px;
            height: 30px;
            line-height: 30px;
            display: block;
            text-decoration: none;
            background-color: #fff;
        }
    }
}
.a:hover .c{
    display: block;
}
.a:hover .b{
    color: #fff;
    background-color: #000;
}
.c a:hover {
    color: aliceblue;
    background-color: #000;
}
body{
    background-color: #ddd;
}

posted @ 2022-11-03 14:16 遇见lilanglang 阅读(62) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 二维码页面

· 对表白墙wxss的解释

· 列表导航栏HTML/CSS

· 导航栏内的下拉菜单

· CSS下拉菜单

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

遇见lilanglang

表述想像的过程既是编程的过程

导航栏下拉列表/vue/scss/html