css模仿电商首页类目菜单选择效果代码

代码语言:html

所属分类:菜单导航

代码描述:css模仿电商首页类目菜单选择效果代码

代码标签: 首页 类目 菜单 选择 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper制作小米官网幻灯片/轮播图演示</title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
    <style>
        body {
            background: white;
        }
        * {
            margin: 0;
            padding: 0;
        }
        ul, ol {
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }

        .dwo-wrap {
            position: relative;
            width: 1226px;
            height: 460px;
            margin: 0 auto;
        }

        .swiper-container {
            width: 1226px;
            height: 460px;
        }
        .swiper-slide img {
            display: block;
            width: 1226px;
            height: 460px;
        }

        .swiper-container-horizontal > .swiper-pagination-bullets {
            left: auto;
            right: 30px;
            bottom: 20px;
            width: auto;
        }
        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            border: 2px solid #fff;
            border-color: hsla(0, 0% ,100% , 0.3);
            background-color: rgba(0, 0, 0, 0.4);
            opacity: 1;
        }
        .swiper-pagination-bullet-active {
            border-color: rgba(0,0,0,.4);
            background-color: hsla(0,0%,100%,.4);
        }

        .swiper-button-next, .swiper-button-prev {
            width: 41px;
            height: 69px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png);
        }
        .swiper-button-prev {
            left: 234px;
            background-position: -83px 0;
        }
        .swiper-button-prev:hover {
            background-position: 0 0;
        }
        .swiper-button-next {
            right: 0;
            background-position: right 0;
        }
        .swiper-button-next:hover {
            background-position: -41px 0;
        }
        .swiper-button-next:after, .swiper-button-prev:after {
            display: none;
        }

        .nav-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            width: 234px;
            background-color: #fff;
            background-color: rgba(105, 101, 101, 0.6);
        }
        .nav {
            position: relative;
            padding: 20px 0;
        }
        .nav-item.active .children {
            display: block;
        }
        .nav-item:hover .nav-item-link {
            background-color: #ff6700;
        }
        .nav-item:hover .children {
            display: block;
        }
        .nav-item-link {
            display: block;
            height: 42px;
            padding-left: 30px;
            line-height: 42px;
            font-size: 14px;
            color: #fff;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png);
            background-position: 200px;
            background-repeat: no-repeat;
            background-size: 14px 14px;
        }
        .children {
            display: none;
            position: absolute;
            left: 234px;
            top: 0;
            border: 1px solid #e0e0e0;
            border-left: 0;
            font-size: 0;
            background-color: #fff;
            box-shadow: 0 8px 16px rgba(0,0,0,.18);
        }
        .children-col-2 {
            width: 496px;
        }
        .children-col-3 {
            width: 744px;
        }
        .children-col-4 {
            width: 992px;
        }
        .children-list {
            display: inline-block;
            width: 248px;
            padding: 1px 0;
            font-size: 14px;
            vertical-align: top;
        }
        .children-list a {
            display: block;
            padding: 18px 20px;
            height: 40px;
            line-height: 40px;
            color: #333;
            font-size: 0;
        }
        .children-list a:hover {
            color: #ff6700;
        }
        .children-list a span {
            display: inline-block;
            width: 158px;
            font-size: 14px;
            overflow: hidden;
            vertical-align: middle;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .children-list img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>

</head>

<body>

    <h1 style="margin: 50px 0; text-align: center;">Swiper制作小米官网幻灯片/轮播图演示</h1>

    <div class="dwo-wrap">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="javascript:">
                        <img src="//repo.bfw.wiki/bfwrepo/image/5e59c0f1eb029.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1220,h_460,/quality,q_90" alt="">
                    </a>
                </div>

            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div class="nav-wrapper">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">手机 电话卡</a>
                    <div class="children children-col-4" style="display: block1;">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 9</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 10X 4G</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 10X 5G</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米10 青春版</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi K30 Pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi K30 Pro 变焦版</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>腾讯黑鲨游戏手机3</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>腾讯黑鲨游戏手机3 Pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米10 Pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米10</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi K30 4G</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi K30 5G</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 8A</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 8</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米MIX Alpha</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi Note 8 Pro</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi Note 8</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 7A</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>移动4G+专区</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米移动 电话卡</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>手机上门维修</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>云服务空间月卡</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>中国电信</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">电视 盒子</a>
                    <div class="children children-col-4">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视 大师 65英寸OLED</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 智能电视 X65</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 智能电视 X55</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 智能电视 MAX 98"</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 55英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 65英寸</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 75英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 Pro 55英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 Pro 65英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视5 Pro 75英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi 红米电视 70英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>全面屏电视Pro 65英寸</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>全面屏电视Pro 55英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米壁画电视 65英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米全面屏电视</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4A 32英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4A 50英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4A 55英寸</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4A 58英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4A 65英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4C 32英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4C 40英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4C 43英寸</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米电视4C 50英寸</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">笔记本 显示器</a>
                    <div class="children children-col-2">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>RedmiBook 13</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米笔记本 15.6"</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米笔记本 13.3"</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米笔记本 12.5"</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>RedmiBook 14</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>小米游戏本</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>显示器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>键鼠套装</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>鼠标</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>转接器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>平板配件</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">家电 插线板</a>
                    <div class="children children-col-4">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>冰箱</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>立式空调</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>壁挂空调</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>滚筒洗衣机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi全自动波轮洗衣机</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>净水器</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>微波炉</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电烤箱</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>扫地机器人</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>吸尘器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>空气净化器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电饭煲</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电磁炉</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电水壶</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>滤水壶</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>落地风扇</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>投影仪</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>灯具</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>插线板</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>新风机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电暖器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电压力锅</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>料理机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电煮壶</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">家电 插线板</a>
                    <div class="children children-col-4">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>冰箱</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>立式空调</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>壁挂空调</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>滚筒洗衣机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>Redmi全自动波轮洗衣机</span>
                                </a>
                            </li>
                            <li>
                                <a href="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>净水器</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>微波炉</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电烤箱</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>扫地机器人</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>吸尘器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>空气净化器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电饭煲</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电磁炉</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电水壶</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>滤水壶</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>落地风扇</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>投影仪</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>灯具</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>插线板</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>新风机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电暖器</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电压力锅</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>料理机</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>电煮壶</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li> <li class="nav-item">
                    <a class="nav-item-link" href="javascript:">家电 插线板</a>
                    <div class="children children-col-4">
                        <ul class="children-list">
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>冰箱</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
                                    <span>立式空调</span>
                                </a>
                            </li>
                       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0