21.模拟天猫的侧面菜单

这是我模拟的效果图：图片自己去天猫扣吧

注：需要jQuery

DOM（标注省略的位置复制粘贴一下a标签）

<div class="slide-menu">
            <div class="content">
                <div class="slide-menu-con">
                    <!--父级菜单-->
                    <div class="tab-content">
                        <div class="con">
                            <ul class="con-content">
                                <li data-spm="panel-0">
                                    <div class="">
                                        女装/内衣
                                    </div>
                                </li>
                                <li data-spm="panel-1">
                                    <div class="">
                                        男装/运动户外
                                    </div>
                                </li>
                                <li data-spm="panel-2">
                                    <div class="">
                                        女鞋/男鞋/箱包
                                    </div>
                                </li>
                                <li data-spm="panel-3">
                                    <div class="">
                                        化妆品/个人护理
                                    </div>
                                </li>
                                <li data-spm="panel-4">
                                    <div class="">
                                        腕表/个人饰品
                                    </div>
                                </li>
                                <li data-spm="panel-5">
                                    <div class="">
                                        手机/数码
                                    </div>
                                </li>
                                <li data-spm="panel-6">
                                    <div class="">
                                        母婴/玩具
                                    </div>
                                </li>
                                <li data-spm="panel-7">
                                    <div class="">
                                        零食/进口食品
                                    </div>
                                </li>
                                <li data-spm="panel-8">
                                    <div class="">
                                        生鲜水果
                                    </div>
                                </li>
                                <li data-spm="panel-9">
                                    <div class="">
                                        大家电/生活电器
                                    </div>
                                </li>
                                <li data-spm="panel-0">
                                    <div class="">
                                        家居建材
                                    </div>
                                </li>
                                <li data-spm="panel-10">
                                    <div class="">
                                        汽车/配件/用品
                                    </div>
                                </li>
                                <li data-spm="panel-11">
                                    <div class="">
                                        家纺/家饰
                                    </div>
                                </li>
                                <li data-spm="panel-12">
                                    <div class="">
                                        医药保健
                                    </div>
                                </li>
                                <li data-spm="panel-13">
                                    <div class="">
                                        厨具/收纳/宠物
                                    </div>
                                </li>
                                <li data-spm="panel-14">
                                    <div class="">
                                        图书音像
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-sub-content">
                        <!--子菜单-->
                        <div class="con-sub">
                            <div class="panel-0 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title" style="word-break: keep-all;">
                                                当季流行
                                            </div>
                                            <div class="line-con">
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                                <a href="#">百搭休闲裤</a>
                                                <a href="#">无痕文胸</a>
                                                <a href="#">运动文胸</a>
                                                <a href="#">超柔内裤</a>
                                                <a href="#">百搭船袜</a>
                                                <a href="#">夏季新品</a>
                                                <a href="#">商场同款</a>
                                                <a href="#">气质连衣裙</a>
                                                <a href="#">印花衬衫</a>
                                                <a href="#">牛仔单品</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                            <img src="img/logo.gif" width="100px"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-1 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-2 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-3 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-4 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                                <a href="#">12345</a>
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-5 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                            
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-6 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-7 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-8 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-9 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-10 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-11 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-12 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-13 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-sub">
                            <div class="panel-14 panel-cus">
                                <div class="panel-content">
                                    <div class="hot-word-con">
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                        <div class="hot-word-line">
                                            <div class="line-title">
                                                分类1
                                            </div>
                                            <div class="line-con">
                                                <a href="#">12345</a>
                                                <!--省略-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="sub-logo">
                                        <div>
                                            <img src="img/logo.gif" width="100px"/>
                                            <!--省略-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

CSS

    /*slide-menu*/
    *{
        margin: 0;
        padding: 0;
        font-size: 12px;
        font:  "Microsoft YaHei",SimSun,'5b8b4f53',sans-serif;
    
    }
    body{
        max-width: 1198px;
        margin: 0 auto;
        margin-top: 10rem;
        background: #E8E8E8;
    }
    .slide-menu{
        position: relative;
        background: #e8e8e8;
    }
    .slide-menu-con{
        position: relative;
        /*height: 500px;*/
        /* 100%;*/
        z-index: 999;
    }
    .slide-menu-con>.menu-type{
        position: absolute;
        top: -36px;
        width: 200px;
        background: #e22127;
        
    }
    .slide-menu-con .logo-1{
        position: absolute;
        top: -167px;
        width: 290px;
        margin-left: -45px;
        text-align: center;
    }
    .logo-1 img{
        display: block;
        margin: 1px auto;
    }
    .slide-menu-con>.menu-type>.text{
        display: inline-block;
        color: white;
        height: 36px;
        font-size: 17px;    
        font-weight: 700;
        word-spacing: normal;
        line-height: 36px;
        padding-left: 3em;
    }
    .tab-content>.con{
        width: 200px;
        height: 0;
    }
    .selected{
        background: #FFFFFF;
        color: #FF0036!important;
        font-weight: bold;
    }
    .con ul{
        width: 200px;
        height: 500px;
        background: #EEEEEE;
    }
    .con ul li{
        
        height: 31.2px;
        line-height: 31.2px;
        position: relative;
        font-size: 14px;
        color: #333;
        list-style: none;
        cursor: pointer;
    }
    .con li>div{
        margin-left: 30px;
        font-size: 13px;
    }
    .tab-sub-content{
        position: absolute;
        left: 0;
        height: 500px;
        top: 0;
    }
    .con-sub{
        position: absolute;
        left: 200px;
        height: 499px;
        width: 800px;
        background: #fff;
        border: 1px solid #EEEEEE;
        border-left-width: 0;
        border-top-width: 0;
        color: #333;
        right: 0;
        
    }
    .con-sub>.panel-cus{
        display: inline-block;
        width: 740px;
        height: 470px;
        margin: 15px 30px;
        background: white;
        
    }
    .hot-word-line .line-title{
        float: left;
        width: 60px;
        color: #333;
        position: relative;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        font-weight: 700;
        
    }
    .hot-word-line .line-con{
        float: left;
        width: 425px;
        border-bottom: 1px dashed #EEEEEE;
        margin-bottom: 5px;
    }
    .line-con a{
        float: left;
        margin-left: 13px;
        font-size: 14px;
        line-height: 22px;
        height: 22px;
        color: #666;
        
    }
    .hot-word-con,.hot-word-line{
        clear: both;
    }
    .hot-word-con{
        float: left;
    }
    .panel-content{
        height: 470px;
    }
    .panel-content .sub-logo{
        height: 100%;
        width: 245px;
        float: left;
    }
    .sub-logo{
        
    }

js

    let panel = $('.con-sub')
    panel.css({
        'display':'none'
    })
    $('.con-content li').mouseover(function(){
        let _this = this
        let ele = $(_this)
        ele.addClass('selected')
        ele.siblings().removeClass('selected')
        let data = ele.data('spm')
        let con = $('.'+data).parents('.con-sub')
        con.css({
            'display':'block'
        })
        con.siblings().css({
            'display':'none'
        })
        con.unbind('mouseleave').bind('mouseleave',function(){
            con.css({
                'display':'none'
            })
            ele.removeClass('selected')
        })
    })
    $('.slide-menu').unbind('mouseleave').bind('mouseleave',function(){
        
        let $li = $('.con-content li')
        let conSub = $('.con-sub')
        $li.removeClass('selected')
        conSub.css({
            'display':'none'
        })
    })