纵有疾风起
人生不言弃

常用css特效样式,持续收集中

一,三级联动类目

常用css特效样式,持续收集中插图

代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>三级联动</title>    <style>        .nav {            width: 160px;            height: auto;            position: fixed;            left: 20px;            top: 20px;            margin-top: 0;        }        .nav-li {            width: 100%;            height: auto;            border-bottom: 1px solid #fff;            text-align: center;            line-height: 40px;            background: #333;            color: white;            font-size: 16px;        }        .tit {            width: 100%;            height: 40px;        }        .nav-li:hover ul {            display: block;        }        .nav-li ul {            width: 100%;            height: auto;            background: gray;            list-style-type: none;            padding: 0;            margin: 0;            display: none;        }        .nav-li ul li {            width: 100%;            height: 40px;            line-height: 40px;            border-bottom: 1px dashed #666;            color: #333333;            text-align: center;            position: relative;        }        /*    三级目录*/        .nav-li ul li:hover .list3 {            display: block;        }        .list3 {            width: 160px;            height: auto;            position: absolute;            left: 160px;            top: 0;            display: none;        }        .list3-item {            background: gold;        }    </style></head><body><div class="nav">    <div class="nav-li">        <div class="tit">一级类目1</div>        <ul>            <li>                二级栏目1                <div class="list3">                    <div class="list3-item">三级目录1-1</div>                    <div class="list3-item">三级目录1-2</div>                    <div class="list3-item">三级目录1-3</div>                </div>            </li>            <li>二级栏目2                <div class="list3">                    <div class="list3-item">三级目录2-1</div>                    <div class="list3-item">三级目录2-2</div>                    <div class="list3-item">三级目录2-3</div>                </div>            </li>            <li>二级栏目3                <div class="list3">                    <div class="list3-item">三级目录3-1</div>                    <div class="list3-item">三级目录3-2</div>                    <div class="list3-item">三级目录3-3</div>                </div>            </li>        </ul>    </div>    <div class="nav-li">        <div class="tit">一级类目2</div>        <ul>            <li>二级栏目2-1</li>            <li>二级栏目2-2</li>            <li>二级栏目2-3</li>        </ul>    </div>    <div class="nav-li">        <div class="tit">一级类目3</div>        <ul>            <li>二级栏目3-1</li>            <li>二级栏目3-2</li>            <li>二级栏目3-3</li>        </ul>    </div></div></body></html>

文章转载于:https://www.jianshu.com/p/16f87fe66b3f

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 常用css特效样式,持续收集中

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活