老师两个问题1当鼠标悬浮主菜单的时候，子菜单背景怎么不显示出来2鼠标离开banner二级菜单不能隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左侧导航</title>
<link rel="stylesheet" href="style7.css">
</head>
<body>
<div class="fs_coll" id="banner">
<div id="J_cate" class="cate J_cate cate10" aria-label="左侧导航">
<ul class="JS_navCtn cate_menu">
<li class="cate_menu_item" id="cate_menu_item">
<a href="#" class="cate_menu_lk">家用电器</a>
</li>
<li class="cate_menu_item">
<a href="#" class="cate_menu_lk">手机</a>
<span class="cate_menu_line">/</span>
<a href="#" class="cate_menu_lk">运营商</a>
<span class="cate_menu_line">/</span>
<a href="#" class="cate_menu_lk">数码</a>
</li>
</ul>
<div id="J_popCtn" class="Js_popCtn cate_pop mod_loading hide">
<div class="cate_part clearfix" id="cate_part" style="display: none">
<div class="cate_part_col1" id="cate_part_col1">
<div class="cate_channel">
<a href="#" class="cate_channel_lk">
家电馆
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
家电专卖店
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
家电服务
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
企业采购
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
商用电器
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
以旧换新
<i class="icofont cate_channel_arrow"></i>
</a>
</div>
<div class="cate_detail">
<dl class="cate_datail_item cate_datail_item1">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">电视</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">超博电视</a>
<a href="#" class="cate_detail_con_lk">全面屏电视</a>
<a href="#" class="cate_detail_con_lk">智能电视</a>
<a href="#" class="cate_detail_con_lk">OLED电视</a>
<a href="#" class="cate_detail_con_lk">智慧屏</a>
<a href="#" class="cate_detail_con_lk">4K超清电视</a>
<a href="#" class="cate_detail_con_lk">55英寸</a>
<a href="#" class="cate_detail_con_lk">65英寸</a>
<a href="#" class="cate_detail_con_lk">电视配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item2">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">空调</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">空调挂机</a>
<a href="#" class="cate_detail_con_lk">空调柜机</a>
<a href="#" class="cate_detail_con_lk">中央空调</a>
<a href="#" class="cate_detail_con_lk">变频空调</a>
<a href="#" class="cate_detail_con_lk">一级能效</a>
<a href="#" class="cate_detail_con_lk">移动空调</a>
<a href="#" class="cate_detail_con_lk">以旧换新</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item3">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">洗衣机</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">滚筒洗衣机</a>
<a href="#" class="cate_detail_con_lk">洗烘一体机</a>
<a href="#" class="cate_detail_con_lk">波轮洗衣机</a>
<a href="#" class="cate_detail_con_lk">迷你洗衣机</a>
<a href="#" class="cate_detail_con_lk">烘干机</a>
<a href="#" class="cate_detail_con_lk">洗衣机配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item4">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">冰箱</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">多门</a>
<a href="#" class="cate_detail_con_lk">对开门</a>
<a href="#" class="cate_detail_con_lk">三门</a>
<a href="#" class="cate_detail_con_lk">双门</a>
<a href="#" class="cate_detail_con_lk">冷柜/冰吧</a>
<a href="#" class="cate_detail_con_lk">酒柜</a>
<a href="#" class="cate_detail_con_lk">冰箱配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item5">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">厨卫大电</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">油烟机</a>
<a href="#" class="cate_detail_con_lk">燃气灶</a>
<a href="#" class="cate_detail_con_lk">烟灶套装</a>
<a href="#" class="cate_detail_con_lk">集成灶</a>
<a href="#" class="cate_detail_con_lk">消毒柜</a>
<a href="#" class="cate_detail_con_lk">洗碗机</a>
<a href="#" class="cate_detail_con_lk">电热水器</a>
<a href="#" class="cate_detail_con_lk">燃气热水器</a>
<a href="#" class="cate_detail_con_lk">空气能热水器</a>
<a href="#" class="cate_detail_con_lk">太阳能热水器</a>
<a href="#" class="cate_detail_con_lk">嵌入式厨电</a>
<a href="#" class="cate_detail_con_lk">烟机灶具配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item6">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">厨房小电</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">破壁机</a>
<a href="#" class="cate_detail_con_lk">电烤箱</a>
<a href="#" class="cate_detail_con_lk">电饭煲</a>
<a href="#" class="cate_detail_con_lk">电压力锅</a>
<a href="#" class="cate_detail_con_lk">电炖锅</a>
<a href="#" class="cate_detail_con_lk">豆浆机</a>
<a href="#" class="cate_detail_con_lk">料理机</a>
<a href="#" class="cate_detail_con_lk">咖啡机</a>
<a href="#" class="cate_detail_con_lk">电饼铛</a>
<a href="#" class="cate_detail_con_lk">榨汁机/原汁机</a>
<a href="#" class="cate_detail_con_lk">电水壶/热水瓶</a>
<a href="#" class="cate_detail_con_lk">微波炉</a>
<a href="#"class="cate_detail_con_lk">电火锅</a>
<a href="#" class="cate_detail_con_lk">养生壶</a>
<a href="#" class="cate_detail_con_lk">电磁炉</a>
<a href="#" class="cate_detail_con_lk">面包机</a>
<a href="#" class="cate_detail_con_lk">空气炸锅</a>
<a href="#" class="cate_detail_con_lk">面条机</a>
<a href="#" class="cate_detail_con_lk">电陶炉</a>
<a href="#" class="cate_detail_con_lk">煮蛋器</a>
<a href="#" class="cate_detail_con_lk">电烧烤炉</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item7">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">生活电器</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">取暖电器</a>
<a href="#" class="cate_detail_con_lk">加湿器</a>
<a href="#" class="cate_detail_con_lk">空气净化器</a>
<a href="#" class="cate_detail_con_lk">吸尘器</a>
<a href="#" class="cate_detail_con_lk">除螨仪</a>
<a href="#" class="cate_detail_con_lk">扫地机器人</a>
<a href="#" class="cate_detail_con_lk">除湿机</a>
<a href="#" class="cate_detail_con_lk">干衣机</a>
<a href="#" class="cate_detail_con_lk">蒸汽拖把/拖地机</a>
<a href="#" class="cate_detail_con_lk">挂烫机/熨斗</a>
<a href="#" class="cate_detail_con_lk">电话机</a>
<a href="#" class="cate_detail_con_lk">饮水机</a>
<a href="#" class="cate_detail_con_lk">净水器</a>
<a href="#" class="cate_detail_con_lk">电风扇</a>
<a href="#" class="cate_detail_con_lk">冷风扇</a>
<a href="#" class="cate_detail_con_lk">毛球修剪器</a>
<a href="#" class="cate_detail_con_lk">生活电器配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item8">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">个护健康</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">剃须刀</a>
<a href="#" class="cate_detail_con_lk">电动牙刷</a>
<a href="#" class="cate_detail_con_lk">电吹风</a>
<a href="#" class="cate_detail_con_lk">美容器</a>
<a href="#" class="cate_detail_con_lk">洁面仪</a>
<a href="#" class="cate_detail_con_lk">按摩器</a>
<a href="#" class="cate_detail_con_lk">健康秤</a>
<a href="#" class="cate_detail_con_lk">卷/直发器</a>
<a href="#" class="cate_detail_con_lk">剃/脱毛器</a>
<a href="#" class="cate_detail_con_lk">理发器</a>
<a href="#" class="cate_detail_con_lk">足浴盆</a>
<a href="#" class="cate_detail_con_lk">足疗机</a>
<a href="#" class="cate_detail_con_lk">按摩椅</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item9">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">视听影音</a>
<i class="iconfont cata_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">家庭影院</a>
<a href="#" class="cate_detail_con_lk">KTV影响</a>
<a href="#" class="cate_detail_con_lk">迷你音响</a>
<a href="#" class="cate_detail_con_lk">DVD</a>
<a href="#" class="cate_detail_con_lk">功效</a>
<a href="#" class="cate_detail_con_lk">回音壁</a>
<a href="#" class="cate_detail_con_lk">麦克风</a>
</dd>
</dl>
</div>
</div>
<div class="cate_part_col2">
<div class="cate_brand">
<a href="#" class="cate_brand_lk">
<img src="img/15d67b12d4cf885d.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/5b9cad64436c05ff.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/099e6109911be678.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/57f9fa89N6ddb14fc.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/574c0755Nc8f19944.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/823e24e3a2acd047.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/6f74f61cd9c7a7b9.jpg" width="83" height="35">
</a>
<a href="#" class="cate_brand_lk">
<img src="img/890312111d77e347.jpg" width="83" height="35">
</a>
</div>
<div class="cate_promotion">
<a href="#" class="cate_promotion_lk">
<img src="img/cc84df8b2d7ae9c8.jpg" width="168" height="134">
</a>
<a href="#" class="cate_promotion_lk">
<img src="img/331a9c8fdb4a4e34.jpg" width="168" height="134">
</a>
</div>
</div>
</div>
<div class="cate_part clearfix" id="cate_item2" style="display: none">
<div class="cate_part_col1">
<div class="cate_channel">
<a href="#" class="cate_channel_lk">
玩3C
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
手机频道
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
网上营业厅
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
配件频道
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
智能数码
<i class="icofont cate_channel_arrow"></i>
</a>
<a href="#" class="cate_channel_lk">
影像Club
<i class="icofont cate_channel_arrow"></i>
</a>
</div>
<div class="cate_part_col1">
<div class="cate_detail">
<dl class="cate_datail_item cate_datail_item1">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">手机通讯</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">手机</a>
<a href="#" class="cate_detail_con_lk">游戏手机</a>
<a href="#" class="cate_detail_con_lk">老人机</a>
<a href="#" class="cate_detail_con_lk">对讲机</a>
<a href="#" class="cate_detail_con_lk">以旧换新</a>
<a href="#" class="cate_detail_con_lk">手机维修</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item2">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">运营商</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">合约机</a>
<a href="#" class="cate_detail_con_lk">手机卡</a>
<a href="#" class="cate_detail_con_lk">宽带</a>
<a href="#" class="cate_detail_con_lk">充话费/流量</a>
<a href="#" class="cate_detail_con_lk">中国电信</a>
<a href="#" class="cate_detail_con_lk">中国移动</a>
<a href="#" class="cate_detail_con_lk">中国联通</a>
<a href="#" class="cate_detail_con_lk">京东通信</a>
<a href="#" class="cate_detail_con_lk">挑靓号</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item3">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">手机配件</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">手机壳</a>
<a href="#" class="cate_detail_con_lk">贴膜</a>
<a href="#" class="cate_detail_con_lk">手机存储卡</a>
<a href="#" class="cate_detail_con_lk">数据线</a>
<a href="#" class="cate_detail_con_lk">充电线</a>
<a href="#" class="cate_detail_con_lk">手机耳机</a>
<a href="#" class="cate_detail_con_lk">创意配件</a>
<a href="#" class="cate_detail_con_lk">手机饰品</a>
<a href="#" class="cate_detail_con_lk">手机电池</a>
<a href="#" class="cate_detail_con_lk">苹果周边</a>
<a href="#" class="cate_detail_con_lk">移动电源</a>
<a href="#" class="cate_detail_con_lk">蓝牙耳机</a>
<a href="#" class="cate_detail_con_lk">手机支架</a>
<a href="#" class="cate_detail_con_lk">车载配件</a>
<a href="#" class="cate_detail_con_lk">拍照配件</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item4">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">摄影摄像</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">数码相机</a>
<a href="#" class="cate_detail_con_lk">微单相机</a>
<a href="#" class="cate_detail_con_lk">单反相机</a>
<a href="#" class="cate_detail_con_lk">拍立得</a>
<a href="#" class="cate_detail_con_lk">运动相机</a>
<a href="#" class="cate_detail_con_lk">摄像机</a>
<a href="#" class="cate_detail_con_lk">镜头</a>
<a href="#" class="cate_detail_con_lk">户外器材</a>
<a href="#" class="cate_detail_con_lk">影棚器材</a>
<a href="#" class="cate_detail_con_lk">冲印服务</a>
<a href="#" class="cate_detail_con_lk">数码相框</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item5">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">数码配件</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">存储卡</a>
<a href="#" class="cate_detail_con_lk">三脚架/云台</a>
<a href="#" class="cate_detail_con_lk">相机包</a>
<a href="#" class="cate_detail_con_lk">滤镜</a>
<a href="#" class="cate_detail_con_lk">闪光灯/手柄</a>
<a href="#" class="cate_detail_con_lk">相机清洁/贴膜</a>
<a href="#" class="cate_detail_con_lk">机身附件</a>
<a href="#" class="cate_detail_con_lk">镜头附件</a>
<a href="#" class="cate_detail_con_lk">读卡器</a>
<a href="#" class="cate_detail_con_lk">支架</a>
<a href="#" class="cate_detail_con_lk">电池/充电器</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item6">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">影音娱乐</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">耳机/耳麦</a>
<a href="#" class="cate_detail_con_lk">音箱/音响</a>
<a href="#" class="cate_detail_con_lk">智能音箱</a>
<a href="#" class="cate_detail_con_lk">便携/无线音箱</a>
<a href="#" class="cate_detail_con_lk">收音机</a>
<a href="#" class="cate_detail_con_lk">麦克风</a>
<a href="#" class="cate_detail_con_lk">MP3/MP4</a>
<a href="#" class="cate_detail_con_lk">专业音频</a>
<a href="#" class="cate_detail_con_lk">音频线</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item7">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">智能设备</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">智能手环</a>
<a href="#" class="cate_detail_con_lk">智能手表</a>
<a href="#" class="cate_detail_con_lk">智能眼镜</a>
<a href="#" class="cate_detail_con_lk">智能机器人</a>
<a href="#" class="cate_detail_con_lk">运动跟踪器</a>
<a href="#" class="cate_detail_con_lk">健康监测</a>
<a href="#" class="cate_detail_con_lk">智能配饰</a>
<a href="#" class="cate_detail_con_lk">智能家居</a>
<a href="#" class="cate_detail_con_lk">体感车</a>
<a href="#" class="cate_detail_con_lk">无人机</a>
</dd>
</dl>
<dl class="cate_datail_item cate_datail_item8">
<dt class="cate_detail_tit">
<a href="#" class="cate_datail_tit_lk">电子教育</a>
<i class="iconfont cate_datail_tit_arrow"></i>
</dt>
<dd class="cate_detail_con">
<a href="#" class="cate_detail_con_lk">学生平板</a>
<a href="#" class="cate_detail_con_lk">点读机/笔</a>
<a href="#" class="cate_detail_con_lk">早教益智</a>
<a href="#" class="cate_detail_con_lk">录音笔</a>
<a href="#" class="cate_detail_con_lk">电纸书</a>
<a href="#" class="cate_detail_con_lk">电子词典</a>
<a href="#" class="cate_detail_con_lk">复读机</a>
<a href="#" class="cate_detail_con_lk">翻译机</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fs_col2"></div>
<script src="script7.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
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');
}
body{
webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
color: #666;
}
.fs_coll{
float: left;
height: 480px;
/* width: 190px;*/
margin-right: 10px;
}
.cate{
position: relative;
z-index: 3;
}
.cate_menu{
overflow: hidden;
padding: 10px 0;
height: 450px;
/* background-color: #fefefe;*/
background-color: #ffb6c1;
color: #636363;
margin-top: 10px;
float: left;
}
#J_popCtn{
float: left;
}
.cate_menu_item{
overflow: hidden;
padding-left: 18px;
height: 25px;
line-height: 25px;
}
a{
color: #666;
text-decoration: none;
}
li{
list-style: none;
}
.cate_menu_lk{
font-size: 14px;
color: #333;
transition: color .2s ease;
}
.cate_menu_line{
padding: 0 2px;
font-size: 12px;
}
.cate_pop{
position: absolute;
left: 191px;
top: 0;
width: 998px;
min-height: 468px;
border: 1px solid #f7f7f7;
background-color: #fff;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
}
.hide{
display: none;
}
.cate_part{
display: none;
padding: 20px 0 10px;
}
.cate_part_col1{
float: left;
width: 800px;
}
.cate_channel{
overflow: hidden;
padding-left: 20px;
height: 24px;
}
.cate_channel_lk{
float: left;
margin-right: 10px;
padding: 0 10px;
height: 24px;
background-color: #333;
line-height: 24px;
text-align:center;
color: #fff;
}
.icofont{
font-family: iconfont,sans-serif;
font-style: normal;
font-size: 13px;
}
.iconfont {
font-family: iconfont,sans-serif;
font-style: normal;
}
.cate_detail{
overflow: hidden;
padding: 10px 0 0 20px;
}
.cate_datail_item{
position: relative;
padding-left: 80px;
}
.cate_detail_tit{
overflow: hidden;
position: absolute;
left: 0;
top: 6px;
width: 70px;
text-align: right;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.cate_datail_tit_lk{
color: #333;
font-weight: 700;
}
.cate_detail_con{
overflow: hidden;
padding: 5px 0;
}
.cate_detail_con_lk{
float: left;
margin: 3px 0;
padding: 0 7px;
height: 16px;
line-height: 16px;
white-space: nowrap;
}
.cate_promotion{
margin: 10px auto 0;
width: 168px;
}
.cate_promotion_lk{
display: block;
margin-bottom: 1px;
height: 134px;
background-color: #e7e7e7;
}
img{
border: 0;
vertical-align: middle;
}
.cate_part_col2{
float: left;
width: 198px;
}
.cate_brand{
margin: auto;
width: 168px;
font-size: 0;
}
.cate_brand_lk{
overflow: hidden;
display: inline-block;
width: 83px;
height: 35px;
margin: 0 0 1px 1px;
background-color: #e7e7e7;
}
.cate_menu_item:hover .cate_pop{
display: block;
}
.cate_channel_lk:hover {
background-color: #c81623;
color: #fff;
}
var jCate = byId("J_cate"),
menuItems = jCate.getElementsByClassName("cate_menu_item"),
jpoctn =byId("J_popCtn"),
cate_part =document.getElementsByClassName("cate_part"),
banner = byId("banner");
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, true);
}
else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
}
else {
element['on' + type] = handler;
}
}
function byId(id){
return typeof (id)==="string" ? document.getElementById(id):id;
}
//鼠标滑过主菜单
for (var m = 0,idx,mlen =menuItems.length;m<mlen;m++){
//给所有主菜单定义属性，标明它的索引
menuItems[m].setAttribute("data-index",m)
addHandler(menuItems[m],"mouseover",function () {
//显示主菜单所在背景
jpoctn.className ="Js_popCtn";
//获取当前主菜单的索引
idx = this.getAttribute("data-index");
for (var j =0;j<menuItems.length;j++){
cate_part[j].style.display="none";
menuItems[j].style.background="none";
}
J_popCtn.style.display="block";
cate_part[idx].style.display="block";
menuItems[idx].style.background="rgba(0,0,0,0.1)";
});
}
//鼠标离开banner，隐藏子菜单
addHandler(banner,"mouseover",function () {
jpoctn.className="J_popCtn hide";
})
正在回答 回答被采纳积分+1
同学你好， 问题解答如下：
1.背景色问题是因为js中给元素重新设置了类名，它之前的类名就被覆盖了。即cate_pop这个类名覆盖后，背景色就没有效果了。在设置类名的时候，把cate_pop也加上。示例：
不过添加如上类名之后，left值要改一下。不然主菜单与子菜单会有一部分间距，当鼠标移入间距部分，子菜单会隐藏。如下调整：
2.老师这边测试没有问题，同学修改后没有效果，可能是哪里没有改对。建议同学认真看老师的回复，对比一下哪里漏改了 ，或者是改错等问题，培养自己解决问题的能力和思考能力。如果实在解决不了，就把自己修改后的代码粘贴到问答区，以便老师为你检查。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
同学你好，问题解答如下：
1.代码中并没有给子菜单设置背景色，只看到给主菜单设置。如下：
建议同学自己设置一下。如果说的不是这个，请详细描述一下，以便老师为你解答。
2. 菜单不隐藏是因为如下
（1）事件写错，改为离开事件
（2）样式的优先级不够，当鼠标移入时，给它设置行内样式display:block。鼠标移出时 ，是设置的类名，这个样式是内部样式，内部样式优先级小于行内样式，所以隐藏样式被覆盖了。
（按F12查看如上图）
把如下去掉：
另外，事件会冒泡。冒泡通俗的理解就是向上冒泡触发父元素的绑定的事件。例如这里当离开主菜单使，父元素绑定了离开事件，所以移出主菜单后，子菜单会被隐藏，这个就是冒泡（现阶段按照老师的去理解，等高级阶段才会涉及）。可以像课程中一样，给子菜单绑定事件：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星