老师打扰了,就是使用了hover方法后无法正常显示

老师打扰了,就是使用了hover方法后无法正常显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/ui.css">
    <title>幕淘网</title>
</head>

<body>
    <!-- top部分 -->
    <div class="top">
        <div class="center">
            <div class="left top-left">
                <ul>
                    <li class="left">
                        <a href="#1" style="color: #f01414;">亲,请登录</a></li>
                    <li class="left"><a href="#1">免费注册</a></li>
                    <li class="left"><a href="#1">手机逛幕多多</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="top-dropdown">
                    <div class="left dropdown-item  ">
                        <div class="dropdown-toggle">
                            <a href="">我的幕多多</a>
                            <i class="dropdown-icon"></i>
                        </div>

                        <ul class="dropdown-layer dropdown-left">
                            <li>
                                <a href="" class="dropdown-items">已买到的宝贝</a>
                                <a href="" class="dropdown-items">我的足迹</a>
                            </li>
                        </ul>
                    </div>
                    <div class="left dropdown-item">
                        <div class="dropdown-toggle"> <a href="">  收藏夹</a><i class="dropdown-icon"></i></div>
                        <ul class="dropdown-layer dropdown-left">
                            <li><a href="###" target="_blank" class="dropdown-items">收藏的宝贝</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">收藏的店铺</a></li>
                        </ul>
                    </div>
                    <div class="left dropdown-item">
                        <div class="dropdown-toggle"> <a href="">  商品分类</a></div>

                    </div>
                    <div class="left dropdown-item">
                        <div class="dropdown-toggle"><a href="">卖家中心</a><i class="dropdown-icon"></i></div>
                        <ul class="dropdown-layer dropdown-left">
                            <li><a href="###" target="_blank" class="dropdown-items">免费开店</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">已卖出的宝贝</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">出售中的宝贝</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">卖家服务市场</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">卖家培训中心</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">体验中心</a></li>
                        </ul>
                    </div>
                    <div class="left dropdown-item ">
                        <div class="dropdown-toggle"><a href=""> 联系客服</a><i class="dropdown-icon"></i></div>
                        <ul class="dropdown-layer dropdown-right">
                            <li><a href="###" target="_blank" class="dropdown-items">消费者客服</a></li>
                            <li><a href="###" target="_blank" class="dropdown-items">卖家客服</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!----------------------------------------    top部分  ------------------------------->


    <!---------------------------------- logo部分------------------------------- -->
    <div class="logo">
        <div class="center">
            <div class="logo-logo left">
                <a href="" class="logo-logo-img"></a>
            </div>
            <div class="logo-search left">
                <form action="https://s.taobao.com/search" id="form">
                    <input type="text" placeholder="灵魂没事一元抢" name="q" class="left search-input" autocomplete="off"></input>
                    <input type="submit" value="搜索" class="left search-submit"></input>
                </form>
                <ul class="search-layer">
                    <!--  <li class="search-layer-item text-ellipsis">123</li>
                    <li class="search-layer-item text-ellipsis">123</li>
                    <li class="search-layer-item text-ellipsis">123</li> -->
                </ul>
            </div>

        </div>
    </div>
    </div>
    </div>

    <!-- -----------------------------------logo部分----------------------------------------- -->


    <!-- -----------------------------------------------nav部分---------------------------------------- -->
    <div class="nav">
        <div class="center">
            <div class="nav-item">
                <a href="">数码城</a>
                <a href="">天黑黑</a>
                <a href="">团购</a>
                <a href="">发现</a>
                <a href="">二手特价</a>
                <a href="">名品汇</a>
            </div>

        </div>
    </div>
    <!-- -----------------------------------------------nav部分---------------------------------------- -->

    <!-- -----------------------------------banner部分----------------------------------------- -->
    <div class="banner">
        <div class="center clearfloat">

            <!-- 商品分类 -->
            <div class="commodity left" id="focus-category">
                <div class="commodity-top">
                    <img src="./img/九宫格.png" alt=""> 商品分类
                </div>

                <ul class="commdity-itmes">

                    <!--   <div class="commdity-names">
                        <a class="commdity-name left">
                            家用电器
                        </a>
                        <i class="right">&gt;</i>
                    </div> -->

                    <li class="dropdown" data-active="category" data-load="js/1.json">
                        <div class="commdity-names ">
                            <a href="###" target="_blank" class="commdity-name left">家用电器</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <dl class="category-details clearfloat">
                                <dt class="category-details-title left">
                                    <a href="###" target="_blank" class="category-details-title-link">电视</a>
                                </dt>
                                <dd class="category-details-item left">
                                    <a href="###" target="_blank" class="link">国产品牌</a>
                                    <a href="###" target="_blank" class="link">对讲机</a>
                                    <a href="###" target="_blank" class="link">以旧换新</a>

                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/2.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">手机</a
                            > <a href="###" target="_blank" class="commdity-name left">运营商</a
                            > <a href="###" target="_blank" class="commdity-name left">数码</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <dl class="category-details clearfloat">
                                <dt class="category-details-title left">
                                    <a href="###" target="_blank" class="category-details-title-link">手机</a>
                                </dt>
                                <dd class="category-details-item left">
                                    <a href="###" target="_blank" class="link">品牌</a>
                                    <a href="###" target="_blank" class="link">对讲机</a>
                                    <a href="###" target="_blank" class="link">以旧换新</a>

                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/3.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">电脑</a
                            > <a href="###" target="_blank" class="commdity-name left">办公</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/4.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">家居</a
                            > <a href="###" target="_blank" class="commdity-name left">家具</a
                            > <a href="###" target="_blank" class="commdity-name left">家装</a
                            > <a href="###" target="_blank" class="commdity-name left">厨具</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/5.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">男装</a
                            > <a href="###" target="_blank" class="commdity-name left">女装</a
                            > <a href="###" target="_blank" class="commdity-name left">童装</a
                            > <a href="###" target="_blank" class="commdity-name left">内衣</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/6.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">化妆</a
                            > <a href="###" target="_blank" class="commdity-name left">清洁</a
                            > <a href="###" target="_blank" class="commdity-name left">宠物</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/7.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">运动户外</a
                            > <a href="###" target="_blank" class="commdity-name left">钟表</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/8.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">汽车</a
                            > <a href="###" target="_blank" class="commdity-name left">汽车用品</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/9.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">母婴</a
                            > <a href="###" target="_blank" class="commdity-name left">玩具乐器</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/10.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">食品</a
                            > <a href="###" target="_blank" class="commdity-name left">酒类</a
                            > <a href="###" target="_blank" class="commdity-name left">生鲜</a
                            > <a href="###" target="_blank" class="commdity-name left">特产</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/11.json">
                        <div class="commdity-names">
                            <a href="###" target="_blank" class="commdity-name left">医药保健</a>
                            <i class="right">&gt;</i>
                        </div>
                        <div class="dropdown-layer" style="display: none;">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>



                </ul>
            </div>




            <!-- 轮播图 -->
            <div class="slideshow left">
                <!--     <div class="slideshow-img" style="left: -728px;">
                    <img src="./img/code/img/focus-slider/5.jpg" alt="">
                    <img src="./img/code/img/focus-slider/1.jpg" alt="">
                    <img src="./img/code/img/focus-slider/2.jpg" alt="">
                    <img src="./img/code/img/focus-slider/3.jpg" alt="">
                    <img src="./img/code/img/focus-slider/4.jpg" alt="">
                    <img src="./img/code/img/focus-slider/5.jpg" alt="">
                    <img src="./img/code/img/focus-slider/1.jpg" alt="">
                </div>
 -->
                <div class="slideshow-img">

                    <img src="./img/code/img/focus-slider/1.jpg" alt="" class="slideshow-imgs" data-index="1">
                    <img src="./img/code/img/focus-slider/2.jpg" alt="" class="slideshow-imgs" data-index="2">
                    <img src="./img/code/img/focus-slider/3.jpg" alt="" class="slideshow-imgs" data-index="3">
                    <img src="./img/code/img/focus-slider/4.jpg" alt="" class="slideshow-imgs" data-index="4">
                    <img src="./img/code/img/focus-slider/5.jpg" alt="" class="slideshow-imgs" data-index="5">
                </div>

                <div class="slideshow-button">
                    <span class="slideshow-button-item slideshow-button-item-act" data-index="1"></span>
                    <span class="slideshow-button-item" data-index="2"></span>
                    <span class="slideshow-button-item" data-index="3"></span>
                    <span class="slideshow-button-item" data-index="4"></span>
                    <span class="slideshow-button-item" data-index="5"></span>
                </div>

                <a href="#2" class="arrow" id="prev">&lt;</a>
                <a href="#2" class="arrow" id="next">&gt;</a>



            </div>





            <!-- 便民服务 -->
            <div class="services right">
                <div class="services-top">
                    <div class="services-top-title">
                        <div class="left title">慕快报</div>
                        <a href="" class="right">更多 &gt;</a>
                    </div>
                    <div class="services-top-items">
                        <a href="" class="services-item">[公告] 幕多多启用新客服电话</a>
                        <a href="" class="services-item">[活动] 优选好货</a>
                        <a href="" class="services-item">[公告] 中差评论功能升级</a>
                        <a href="" class="services-item">[公告] 陌生人拼团上线</a>
                        <a href="" class="services-item">[新闻] 售假获刑又起诉</a>
                    </div>
                </div>
                <div class="services-middle">
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe616;</p>
                            <p>话费</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe614;</p>
                            <p>机票</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe6a7;</p>
                            <p>电影票</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe60e;</p>
                            <p>游戏</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe6cc;</p>
                            <p>彩票</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe60b;</p>
                            <p>加油卡</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe681;</p>
                            <p>酒店</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe636;</p>
                            <p>火车票</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe6e6;</p>
                            <p>众筹</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe605;</p>
                            <p>理财</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe7d9;</p>
                            <p>礼品卡</p>
                        </a>

                    </div>
                    <div class="services-middle-item">
                        <a>
                            <p class='iconfont'>&#xe61c;</p>
                            <p>多点金</p>
                        </a>

                    </div>
                </div>
                <div class="services-bottom"></div>
            </div>
        </div>
    </div>
    <!-- -----------------------------------banner部分----------------------------------------- -->
      <script type="text/javascript" src="./js/jq.js"></script>
    <script type="text/javascript" src="./js/drop.js"></script>
    <script type="text/javascript" src="./js/hide.js"></script>
    <!-- <script type="text/javascript" src="./js/slideshow.js"></script> -->
    <script type="text/javascript" src="./js/search.js"></script>
    <script type="text/javascript" src="./js/toolbar.js"></script>

</body>

</html>
.clearfloat {
    zoom: 1;
}

.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

* {
    margin: 0;
    padding: 0;
}

body {
    overflow-y: scroll;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

.right {
    float: right;
}

.left {
    float: left;
}

.center {
    margin: 0 auto;
    width: 1200px;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/*icon*/

@font-face {
    font-family: "iconfont";
    src: url('../font/iconfont.eot');
    /* IE9*/
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/iconfont.woff2') format('woff2'), /*  */
    url('../font/iconfont.woff') format('woff'), /*  */
    url('../font/iconfont.ttf') format('truetype'), /*  */
    url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.transition {
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    transform: ;
}
.top {
    height: 44px;
    background: #f3f5f7;
    font-size: 10px;
}

.top .center {
    border-bottom: 1px solid #cdd0d4;
    height: 43px;
    line-height: 43px;
}

.top .top-left li a {
    display: inline-block;
    padding-left: 25px;
    color: #4d555d;
}

.top-dropdown .dropdown-item a:hover,
.top .top-left li a:hover {
    color: #f01414;
    text-decoration: none;
}

.top-dropdown {
    height: 100%;
}

.dropdown-toggle {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    padding: 0 16px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

.top-dropdown .dropdown-item {
    position: relative;
}

.dropdown-icon {
    display: inline-block;
    width: 8px;
    height: 6px;
    background: url(../img/code/img/dropdown-arrow.png) no-repeat;
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
}

.top-dropdown .dropdown-item a {
    color: #4d555d;
}

.dropdown-left {
    left: 0;
    right: auto;
}

.dropdown-right {
    right: 0;
    left: auto;
}

.dropdown-layer {
    display: none;
    position: absolute;
    top: 43px;
    background-color: #fff;
    z-index: 1;
    border: 1px solid #cdd0d4;
}

.dropdown-items {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    color: #4d555d;
    white-space: nowrap;
}

.dropdown-items:hover {
    background-color: #f3f5f7;
}

.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

.dropdown-active .dropdown-icon,
.dropdown:hover .dropdown-icon {
    background-image: url(../img/code/img/dropdown-arrow-active.png);
}

.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer {
    display: block;
}


/* -----------------top部分------------------------ */


/* ------------------logo部分------------------- */

.logo {
    background: #f3f5f7;
    line-height: 126px;
    height: 126px;
    width: 100%;
}

.logo-logo a {
    cursor: pointer;
    display: block;
    width: 212px;
    height: 58px;
    margin: 36px 0 0 15px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../img/code/img/header-logo.png) no-repeat;
}

.logo-search {
    width: 680px;
    height: 42px;
    border: 1px solid #cfd2d5;
    margin-top: 38px;
    margin-left: 150px;
    position: relative;
}

.search-input {
    width: 586px;
    height: 42px;
    border: none;
    background: #fff;
    padding: 0 10px;
    line-height: 42px;
}

.search-submit {
    border: none;
    outline: none;
    background: #ca003f;
    color: #fff;
    height: 42px;
    width: 74px;
    cursor: pointer;
}

.search-layer {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #cfd2d5;
    z-index: 99;
}

.search-layer-item {
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    cursor: pointer;
}

.search-layer-item:hover {
    background-color: #f3f5f7;
}


/* ------------------logo部分------------------- */


/* ------------------nav部分------------------- */

.nav {
    background: #ca003f;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-bottom: 8px;
}

.nav .nav-item {
    position: relative;
    margin-left: 300px;
}

.nav .nav-item a {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin-right: 62px;
    color: #fff;
    padding: 0 10px;
}

.nav .nav-item a:hover {
    color: red;
    background: #000000;
}


/* ----------------------------nav部分--------------------------------------- */


/* -------------------------------------banner部分--------------------------- */

.banner {
    height: 504px;
    width: 100%;
    background: #f3f5f7;
    margin-bottom: 10px;
}

.commodity {
    background: #c1043f;
    position: relative;
    width: 208px;
    height: 566px;
    margin-top: -62px;
    margin-right: 8px;
    color: #fff;
    z-index: 9;
}

.commodity-top {
    margin-top: 12px;
    height: 50px;
    width: 100%;
}

.commodity-top img {
    width: 12px;
    height: 12px;
    background-color: #c1043f;
    margin-left: 24px;
    margin-right: 12px;
}

.commdity-itmes {
    width: 208px;
    height: 504px;
    color: #fff;
}

.commdity-names {
    width: 100%;
    height: 22px;
    margin-bottom: 14px;
    padding: 5px 0;
}

.commdity-name {
    margin-left: 16px;
    font-size: 14px;
    color: #fff;
}

.commdity-names i {
    margin-right: 12px;
    font-size: 12px;
}

.banner .commodity .commdity-names-act {
    background: #fff;
}

.banner .commodity .commdity-names-act .commdity-name,
.banner .commodity .commdity-names-act i {
    color: #c1043f;
}


/* 下拉层 */

.commdity-itmes {
    position: relative;
}

.commdity-itmes .dropdown-layer {
    display: block;
    position: absolute;
    left: 208px;
    top: -8px;
    width: 744px;
    min-height: 472px;
    background-color: #fff;
    padding: 8px 0 31px 0;
}

.category-details {
    width: 744px;
    margin-top: 24px;
    line-height: 20px;
}

.category-details .category-details-title {
    width: 84px;
    padding-right: 16px;
    border-right: 1px solid #d9dde1;
    text-align: right;
}

.category-details .category-details-title-link {
    color: #07111b;
    font-weight: bold;
}

.category-details .category-details-item {
    width: 592px;
    padding-left: 15px;
}

.category-details .category-details-item .link {
    color: #000000;
    display: inline-block;
    margin-right: 16px;
    font-size: 12px;
}


/* ----------轮播图------------------ */

.slideshow {
    position: relative;
    height: 504px;
    width: 728px;
    overflow: hidden;
}

.slideshow-img {
    height: 504px;
    width: 728px;
    position: absolute;
}


/* .slideshow-img img {
    float: left;
} */

.slideshow .arrow {
    position: absolute;
    color: #fff;
    background: #000000;
    height: 90px;
    width: 46px;
    line-height: 90px;
    font-size: 35px;
    text-align: center;
    display: none;
}

.slideshow #prev {
    left: 0;
    top: 50%;
    margin-top: -45px;
}

.slideshow #next {
    right: 0;
    top: 50%;
    margin-top: -45px;
}

.slideshow-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: 26px;
    margin-left: -46px;
    display: none;
}

.slideshow-button .slideshow-button-item {
    float: left;
    display: block;
    height: 7px;
    width: 7px;
    background: grey;
    margin-right: 12px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

.slideshow .slideshow-button .slideshow-button-item-act {
    background: #fff;
    border: 1px solid grey;
}


/* ------------便民服务----------  */

.services {
    height: 504px;
    width: 248px;
}

.services .services-top {
    height: 197px;
    width: 247px;
    border: 1px solid #d9dde1;
    border-bottom: none;
}

.services-top-title {
    height: 52px;
    width: 100%;
    line-height: 52px;
}

.services-top-title a {
    color: #4d555d;
    font-size: 11px;
    margin-right: 30px;
}

.services-top-title .title {
    color: #f01414;
    margin-left: 16px;
    font-size: 18px;
}

.services-top-items {
    width: 100%;
    height: 162px;
    margin-left: 16px;
}

.services-item {
    display: block;
    height: 14px;
    margin-bottom: 15px;
    color: #4d555d;
    font-size: 13px;
}

.services-top-items a:hover {
    color: #f01414;
}

.services .services-middle {
    height: 216px;
    width: 248px;
    border-left: 1px solid #d9dde1;
}

.services-middle-item {
    width: 61px;
    height: 71px;
    border-top: 1px solid #d9dde1;
    border-right: 1px solid #d9dde1;
    float: left;
}

.services-middle-item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.services-middle-item .iconfont {
    color: #f67272;
    font-size: 23px;
    /*  transition-duration: .6s; */
    -webkit-transition: -webkit-transform .6s;
    -moz-transition: -moz-transform .6s;
    -ms-transition: -ms-transform .6s;
    -o-transition: -o-transform .6s;
    transition: transform .6s;
}


/*   运动  */

.services-middle-item:hover .iconfont {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}


/* @keyframes move {
    0% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
 */

.services-middle-item p {
    font-size: 2px;
}

.services-middle-item a {
    margin-top: 18px;
    display: block;
    text-align: center;
}

.services .services-bottom {
    height: 89px;
    width: 248px;
    background: url(../img/code/img/focus-ad.png);
}


/* -----------------------------banner部分-------------------------------- */
var dropdown = $(".dropdown");
var commditynames = dropdown.find(".commdity-names");
var dropdownlayer = dropdown.find(".dropdown-layer");

dropdown.hover(function(e) {
    var index = $(this).index();
    console.log(index);


    commditynames.removeClass("commdity-names-act").eq(index).addClass("commdity-names-act");
    loadOnce($(this), createCategoryDetails);
    $(this).find(".dropdown-layer").show();
    e.stopPropagation();
}, function(e) {
    commditynames.removeClass("commdity-names-act");
    loadOnce($(this), createCategoryDetails);
    $(this).find(".dropdown-layer").hide();

    e.stopPropagation();
})





function createCategoryDetails($elem, data) {
    var html = '';

    for (var i = 0; i < data.length; i++) {

        html += '<dl class="category-details clearfloat"><dt class="category-details-title left"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item left">';

        for (var j = 0; j < data[i].items.length; j++) {

            html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
        }

        html += '</dd></dl>';
    }
    // setTimeout(function () {
    $elem.find('.dropdown-layer').html(html);
    // },1000);

};


function loadOnce($elem, success) {
    var dataLoad = $elem.data('load');

    if (!dataLoad) return;

    if (!$elem.data('loaded')) {
        $elem.data('loaded', true);
        $.getJSON(dataLoad).done(function(data) {
            if (typeof success === 'function') success($elem, data);
        }).fail(function() {
            $elem.data('loaded', false);
        });
    }
}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕言 2019-12-19 19:04:46

同学你好,使用同学提供的代码测试,鼠标可以移入上次截图中的绿框区域和褐色框区域里。同学指的是哪里呢?可以配合图文详细的描述下。祝学习愉快~

好帮手慕言 2019-12-19 18:05:03

同学你好,菜单是可以正常显示的,如下图

http://img1.sycdn.imooc.com//climg/5dfb4ab009390a6909370545.jpg

如果不是这里的话,建议同学描述清楚,老师帮助解答。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 繁湖 #1
    可以显示,,但是你移动到下拉列表就没有了,,就不能正确显示
    2019-12-19 18:08:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师