SOURCE

<div class="categoryWithCarousel"><!-- 轮播总体div -->
    <div syle="position:relative;"><!-- 相对于总体div（categoryWithCarousel）是相对的-->
        <div class="categoryMenu"><!-- 菜单栏 -->
            <!--以下是各种商品 -->
            <div class="eachCategory" cid="83"><!-- 每一商品 div块状（自动换行）+span图标（bootstrap）+a链接 -->
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    平板电视
                </a>
            </div>
            <div class="eachCategory" cid="82">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    马桶
                </a>
            </div>
            <div class="eachCategory" cid="81">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    沙发
                </a>
            </div>
            <div class="eachCategory" cid="80">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    电热水器
                </a>
            </div>
            <div class="eachCategory" cid="79">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    平衡车
                </a>
            </div>
            <div class="eachCategory" cid="78">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    扫地机器人
                </a>
            </div>
            <div class="eachCategory" cid="77">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    原汁机
                </a>
            </div>
            <div class="eachCategory" cid="76">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    冰箱
                </a>
            </div>
            <div class="eachCategory" cid="75">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    空调
                </a>
            </div>
            <div class="eachCategory" cid="74">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    女表
                </a>
            </div>
            <div class="eachCategory" cid="73">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    男表
                </a>
            </div>
            <div class="eachCategory" cid="72">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    男士手拿包
                </a>
            </div>
            <div class="eachCategory" cid="71">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    男士西服
                </a>
            </div>
            <div class="eachCategory" cid="69">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    时尚男鞋
                </a>
            </div>
            <div class="eachCategory" cid="68">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    品牌女装
                </a>
            </div>
            <div class="eachCategory" cid="64">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    太阳镜
                </a>
            </div>
            <div class="eachCategory" cid="60">
                <span class="glyphicon glyphicon-link"></span>
                <a href="#nowhere">
                    安全座椅
                </a>
            </div>
            <!--以上是各种商品 -->
        </div>
    </div>

    <!-- 以下的position:absolute相对于以下这个position:relative的div -->
    <div style="position: relative;left: 0;top: 0;">
        <!-- cid="83" categoryId商品id为83，对应平板电视的cid -->
        <div class="productsAsideCategorys" cid="83">
            <div class="row ">
                        <a href="#nowhere"> 屏大影院</a>
                        <a href="#nowhere">周末</a>
                        <a href="#nowhere">新品特惠</a>
                        <a href="#nowhere">32吋电视机</a>
                        <a href="#nowhere">智能网络</a>
                <div class="seperator"></div><!-- 分隔虚线 每行都要-->
            </div>
            <div class="row ">
                        <a href="#nowhere">USB高清解</a>
                        <a href="#nowhere">芒果TV在线</a>
                        <a href="#nowhere">抢购价</a>
                        <a href="#nowhere"> USB解码</a>
                        <a href="#nowhere">32英吋</a>
                        <a href="#nowhere">10核</a>
                        <a href="#nowhere">TCL品牌日</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere">不要赠品</a>
                        <a href="#nowhere">新品上市</a>
                        <a href="#nowhere">4K硬屏</a>
                        <a href="#nowhere"> 领100元券</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">智能高清</a>
                        <a href="#nowhere">8月，酷暑</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">8月大促</a>
                        <a href="#nowhere">天猫定制</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere">智能操作系统</a>
                        <a href="#nowhere">金色外观</a>
                        <a href="#nowhere">三星屏幕</a>
                        <a href="#nowhere">客厅爆款</a>
                        <a href="#nowhere">八核配置</a>
                        <a href="#nowhere">限时特惠</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere">限时特惠 </a>
                        <a href="#nowhere">热销爆款</a>
                        <a href="#nowhere">4K全高清</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">六核智能</a>
                        <a href="#nowhere">14核4K</a>
                        <a href="#nowhere">YUNOS</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">YUNOS</a>
                        <a href="#nowhere">64位处理器</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere">YUNOS</a>
                        <a href="#nowhere">微信电视</a>
                        <a href="#nowhere">4k超清</a>
                        <a href="#nowhere">64位真4K</a>
                        <a href="#nowhere">10核机芯</a>
                        <a href="#nowhere">V字黑釉底座</a>
                        <a href="#nowhere">4K超清</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere">64位14核</a>
                        <a href="#nowhere">海量影视</a>
                        <a href="#nowhere">人气爆款</a>
                        <a href="#nowhere">限时特惠</a>
                        <a href="#nowhere">真4K屏</a>
                        <a href="#nowhere">65吋巨屏</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">4K超清视界</a>
                        <a href="#nowhere">限时特惠</a>
                <div class="seperator"></div>
            </div>       
            <div class="row ">
                        <a href="#nowhere"> 55寸旗舰</a>
                        <a href="#nowhere">4K机皇</a>
                        <a href="#nowhere">曲面机皇</a>
                        <a href="#nowhere" style="color: rgb(135, 206, 250);">轻薄4K</a>
                <div class="seperator"></div>
            </div>              
        </div>
        <!-- (以上)cid="83" categoryId商品id为83，对应平板电视的cid -->    
    </div>
        <div style="height:510px"></div><!-- 估计是背景 -->
</div>

/* 分类菜单div */
div.categoryWithCarousel div.categoryMenu {
    width: 200px;
    background-color: #e2e2e3;
    margin-left: 20px;/*左外边距*/
    position: absolute;/* 相对于position:relative的回应 */
    top: 0;
    left: 0;
    z-index: 1;/* 默认覆盖在最上面。之后是背景（z-index:-1） */
}

/* 菜单的链接 */
div.categoryWithCarousel div.categoryMenu a {
    color: #000;/* 链接是黑色的 */
}

/* 菜单的链接悬停状态 */
div.categoryWithCarousel div.categoryMenu a:hover {
    color: lightskyblue;/* 天蓝色 */
    text-decoration: none;/* 无下划线 */
}

/* 分类对应的推荐商品列表 (class一定不能写错)*/
div.categoryWithCarousel div.productsAsideCategorys {
    width: 800px;
    height: 510px;/* 高度和轮播图高度一致510px */
    background-color: white;
    margin-left: 220px;/* 保持左面的分类菜单不被覆盖，并且推荐商品列表在轮播图上 */
    position: absolute;/* 相对于position:relative的div绝对，而position:relative的div相对于总体div，但要相对于分类菜单，只能加margin-left,在分类菜单的右面*/
    top: 0;/*依靠在分类菜单上*/
    left: 0;/*依靠在导航条上*/
    z-index: 1;/* 默认覆盖在最上面。之后是轮播图（默认，无z-index，一般情况z-index=0），之后是背景（z-index:-1） */
}

/* 分类对应的推荐商品列表 *商品列表中的每一行* */
div.categoryWithCarousel div.productsAsideCategorys div.row {
    margin: 20px 80px 0px 80px;/*上20，左右80，上20弥补了分割线的margin-top:20px,分隔线上下都有距离*/
}

/* 分类对应的推荐商品列表的 *每一行的分隔符* */
div.categoryWithCarousel div.productsAsideCategorys div.seperator {
    border-bottom:1px dashed #e7e7e7;/*dashed虚线*/ 
    margin-top: 20px;/* 分隔符上边距+10px，不影响每行之间的padding,margin */
}

/* 分类对应的推荐商品列表的 *商品链接* */
div.categoryWithCarousel div.productsAsideCategorys a {
    color: #999;
    font-size: 14px;
    margin: 8px;
}

/* 分类对应的推荐商品列表的 *商品悬停状态* */
div.categoryWithCarousel div.productsAsideCategorys a:hover {
    color: #C40000;
    text-decoration: none;
}

/* 菜单栏的 *每个分类* */
div.categoryWithCarousel div.categoryMenu div.eachCategory {
    line-height: 30px;/*上面height标明30px，现在要居中*/
    padding-left: 10px;/*左内边距为10px，为了图标位置*/
    font-size: 14px;
}

/* 菜单栏的 *每个分类前面的小图标* */
div.categoryWithCarousel div.categoryMenu div.eachCategory span {
    margin-right: 10px;/*图标和文字之间有10px距离*/
}

/* 菜单栏的 *分类div悬停状态* */
div.categoryWithCarousel div.categoryMenu div.eachCategory:hover {
    background-color: white;/*背景色改成白色，感觉就和右边的产品列表连在一起了*/
}