老师您好, 我的左侧菜单在鼠标移出的时候背景没有恢复

老师您好, 我的左侧菜单在鼠标移出的时候背景没有恢复

<!DOCTYPE html>
<html>
<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">
  <title>Document</title>
  <style>
  /*All style */
  *{
    padding: 0;
    margin: 0;
    border: 0;
  }
  ul,li{
    list-style: none;
  }
  a{
    text-decoration: none;
    display: block;
  }
  i{
    display: inline-block;
    /* list-style: none; */
  }
  body{
    font-family: "Microsoft YaHei",sans-serif;
    color:#031917;
    font-size: 12px;

  }
  .clearfix:before,
  .clearfix:after{
    content: '';
    display: block;
    clear: both;
  }
  .clearfix{
    *zoome: 1;
  }
  .bannerBox{
    width: 1200px;
    margin: 0 auto;
  }
  .bannerBox .menuBox{
    float: left;
    width: 208px;
    height: 566px;
    background: #f01414;
    margin-top: -54px;
    position: relative;
  }
  .bannerBox .menuBox .menuContent dt{
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    line-height: 54px;
    padding-left:46px;
    background: #c81415 url('../images/shangpin.png') no-repeat 22px 21px;
  }
  .bannerBox .menuBox .menuContent dl a{
    padding-left: 15px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    position: relative;
  }
  .bannerBox .menuBox .menuContent dl a.hover{
    background: #fff;
    color: red;
  }
  .bannerBox .menuBox .menuContent dl a i{
    width: 12px;
    height: 12px;
    background: url('../images/icon/23.png') no-repeat left center;
    background-size: cover;
    transform: rotate(-90deg);
    position: absolute;
    right: 14px;
    top: 13px;
  }
  .bannerBox .menuBox .menuContent dl a:hover i{
    background-image: url('../images/icon/24.png');
  }
  /* subMenu */
  .bannerBox .menuBox .subMenu{
    width: 742px;
    min-height: 512px;
    background: #fff;
    box-shadow: 0px 1px 1px 0 #ccc;
    padding-top: 40px;
    box-sizing: border-box;
    position: absolute;
    top: 54px;
    left: 207px;
    z-index: 10;
    display: none;
  }
  .bannerBox .menuBox .subMenu .subMenuBox{
    margin-left:40px;
    display:none;
  }
  .padR10{
    padding-right : 10px;
  }
  .marR10{
    margin-right : 10px;
  }
  .bannerBox .menuBox .subMenu .subMenuBox .subRow{
    margin-bottom: 30px;
  }
  .bannerBox .menuBox .subMenu .subMenuBox .subRowL{
    border-right: 2px solid #ccc;
    text-align: right;
    overflow: hidden;
    width: 60px;
    font-weight: bold;
    font-size: 14px;
    float: left;
  }
  .bannerBox .menuBox .subMenu .subMenuBox .subRowR{
    float: left;
    width: 580px;
  }
  .bannerBox .menuBox .subMenu .subMenuBox .subRowR a{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    color: #353535;
  }
  .bannerBox .menuBox .subMenu .subMenuBox .subRowR a:hover{
    color: red;
  }


  </style>
</head>
<body>
    <div class="bannerBox clearfix">
  <div class="menuBox">
    <div class="menuContent">
      <dl>
        <dt>商品分类</dt>
        <dl class="menuitem"><a href="javascript:void(0)">家用电器<i></i></a></dl>
        <dl class="menuitem"><a href="javascript:void(0)">手机、运营商、数码<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">电脑、办公<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">家居、家具、家装、厨具<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">男装、女装、童装、内衣<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">化妆、清洁、宠物<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">运动户外、钟表<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">汽车、汽车用品<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">母婴、玩具乐器<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">食品、酒类、生鲜、特产<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">医药保健<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">图书、音像、电子书<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">彩票、旅行、重置、票务<i></i></a></dl></dl>
        <dl class="menuitem"><a href="javascript:void(0)">理财、众筹、白条、保险<i></i></a></dl></dl>
      </dl>
    </div>
    <div class="subMenu">
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国联通</a>
            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机支架</a>
            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">苹果周边</a>
            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">手机支架</a>
            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">手机饰品</a>
            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>手机通讯</div>
          <div class="subRowR">
            <a href="#">手机</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>运营商</div>
          <div class="subRowR">


            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>手机配件</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>


            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>摄影摄像</div>
          <div class="subRowR">

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>数码配件</div>
          <div class="subRowR">

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>影音娱乐</div>
          <div class="subRowR">

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>智能设备</div>
          <div class="subRowR">

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电子教育</div>
          <div class="subRowR">

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>联想</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>苹果</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国联通</a>
            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>显示屏</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>戴尔</div>
          <div class="subRowR">

            <a href="#">苹果周边</a>
            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>华硕</div>
          <div class="subRowR">

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>打印机</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>照相机</div>
          <div class="subRowR">

            <a href="#">蓝牙耳机</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>索尼</div>
          <div class="subRowR">

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>复读机</div>
          <div class="subRowR">
            <a href="#">手机</a>

            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>运营商</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>MP3</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>乐视</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>vivo</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>OPPO</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>智能</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电子教育</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器5</div>
          <div class="subRowR">
            <a href="#">手机</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱5</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>
            <a href="#">170选号</a>

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机5</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑5</div>
          <div class="subRowR">
            <a href="#">数码相机</a>
            <a href="#">单电/微电相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉5</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶5</div>
          <div class="subRowR">

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机5</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机5</div>
          <div class="subRowR">

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器6</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱6</div>
          <div class="subRowR">

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机6</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑6</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉6</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶6</div>
          <div class="subRowR">

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机6</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">苹果周边</a>
            <a href="#">移动电源</a>
            <a href="#">蓝牙耳机</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机6</div>
          <div class="subRowR">

            <a href="#">手机耳机</a>
            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器7</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱7</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国联通</a>
            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机7</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑7</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉7</div>
          <div class="subRowR">

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶7</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机7</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机7</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器7</div>
          <div class="subRowR">
            <a href="#">手机</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱7</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机7</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑8</div>
          <div class="subRowR">

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉8</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶8</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机8</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机8</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器9</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱9</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机9</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑9</div>
          <div class="subRowR">
            <a href="#">数码相机</a>
            <a href="#">单电/微电相机</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉9</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶9</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机9</div>
          <div class="subRowR">

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机9</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器10</div>
          <div class="subRowR">
            <a href="#">手机</a>
            <a href="#">对讲机</a>
            <a href="#">以旧换新</a>
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱10</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机10</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑10</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉10</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶10</div>
          <div class="subRowR">

            <a href="#">手机饰品</a>
            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机10</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机10</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器10</div>
          <div class="subRowR">

            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱10</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>
            <a href="#">170选号</a>

            <a href="#">中国联通</a>
            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机10</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑11</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">苹果周边</a>
            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉11</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶11</div>
          <div class="subRowR">

            <a href="#">手机饰品</a>
            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机11</div>
          <div class="subRowR">

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机11</div>
          <div class="subRowR">

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器12</div>
          <div class="subRowR">
            <a href="#">手机</a>
    >
            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱12</div>
          <div class="subRowR">

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机12</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑12</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉12</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶12</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机12</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机12</div>
          <div class="subRowR">

            <a href="#">手机耳机</a>
            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器13</div>
          <div class="subRowR">

            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱13</div>
          <div class="subRowR">
            <a href="#">充话费/流量</a>

          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机13</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑13</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉13</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶13</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">手机饰品</a>
            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机13</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机13</div>
          <div class="subRowR">

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
      <div class="subMenuBox">
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电器14</div>
          <div class="subRowR">

            <a href="#">手机维修</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>冰箱14</div>
          <div class="subRowR">

            <a href="#">中国电信</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>洗衣机14</div>
          <div class="subRowR">
            <a href="#">手机壳</a>
            <a href="#">贴膜</a>

            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>电脑14</div>
          <div class="subRowR">
            <a href="#">数码相机</a>

            <a href="#">移动电源</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>微波炉14</div>
          <div class="subRowR">

            <a href="#">手机支架</a>
            <a href="#">车载配件</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>开水壶14</div>
          <div class="subRowR">
      a>
            <a href="#">手机电池</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>吹风机14</div>
          <div class="subRowR">

            <a href="#">蓝牙耳机</a>
            <a href="#">拍照配件</a>
          </div>
        </div>
        <div class="subRow clearfix">
          <div class='padR10 marR10 subRowL'>缝纫机14</div>
          <div class="subRowR">
            <a href="#">手机壳</a>

            <a href="#">任意配件</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function(){
      var menuBox = $('.menuBox'),
          menuContent = $('.menuContent'),
          menuitem = $('.menuitem'),
          menuitemA = $('.menuitem a'),
          subMenu = $('.subMenu'),
          subMenuBox = $('.subMenuBox');
          menuitmeLen = menuitem.length;

      for (var i = 0; i < menuitmeLen; i++) {
        menuitem.eq(i).data('data-menu',i);
        menuitem.mouseover(function(){
          subMenu.css('display','block');
          var index = $(this).data('data-menu');
          for (var j = 0; j < menuitmeLen; j++) {
            subMenuBox.eq(j).css('display','none');
            menuitemA.eq(j).removeClass('hover');
          }
          subMenuBox.eq(index).css('display','block');
          menuitemA.eq(index).addClass('hover');
        });
      }
        menuBox.mouseout(function(){
          subMenu.css('display','none');
        });
        subMenu.mouseover(function(){
            $(this).css('display','block');
        });
        subMenu.mouseout(function(){
          subMenu.css('display','none');
        });

    })
  </script>
</body>
</html>
请叫我Jon 2018-06-04
源自：项目：JQ实现瀑布流   5-2 作业题
16
收起

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

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

2回答
Miss路 2018-06-04 18:37:43

你这里不需要写循环，只需要给左边的列表设置鼠标移入移出事件就可以了，然后通过父元素子元素关系找到对应的右侧要显示的内容就可以了。你再试试。

0
收起回答
Miss路 2018-06-04 18:14:23

给menuitem 添加鼠标移出事件，当移出的时候字体颜色和背景都要发生变化。祝学习愉快！

0
收起回答
  • 提问者 请叫我Jon #1
    menuitem.mouseout(function(){ menuitemA.removeClass('hover'); }); 可是添加完之后, 在鼠标移入二级菜单的时候效果就没了!!!
    2018-06-04 18:17:00
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，请问如何实现子菜单移入不隐藏，移出又隐藏
0 2 4
主要问题，当鼠标离开菜单区域时，如何去掉主菜单中的背景颜色
0 0 3
导航菜单鼠标移出一直有黑色背景
0 0 3
顶部右侧下拉菜单不知道怎么实现二级菜单与相对应一级菜单在同一边框的效果
14 0 5
老师两个问题1当鼠标悬浮主菜单的时候，子菜单背景怎么不显示出来2鼠标离开banner二级菜单不能隐藏
28 0 4

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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