求解
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<style type="text/css">
.wrap{
position:relative;
width:200px;
left:50px;
top:50px;
}
ul{
padding:15px 0;
margin:9;
list-style:none;
background:#6c6669;
color:#ffffff;
border-right-width:0;
}
li{
display:block;
height:30px;
line-height:30px;
padding-left:12px;
cursor:pointer;
font-size:14px;
position:relative;
}
/* 鼠标移动上去的背景色 */
li.active{
background:#999395;
}
li span:hover{
color:#c81623;
}
.none{
display:none;
}
#sub{
width:600px;
position:absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow:2px 0 5px rgba(0,0,0,0.3);
left: 200px;
top:0;
box-sizing:border-box;
margin:0;
padding:10px;
}
.sub_content a{
font-size:12px;
color:#666;
text-decoration:none;
}
.sub_content dd a{
border-left:1px solid #e0e0e0;
padding:0 10px;
margin:4px 0;
}
.sub_content dl{
overflow:hidden;
}
.sub_content dt{
float:left;
width:70px;
font-weight:bold;
clear:left;
position:relative;
}
.sub_content dd{
float:left;
margin:5px;
border-top:1px solid #eee;
margin-bottom:5px;
}
.sub_content dt i{
width:4px;
height:14px;
font:400 9px/14px consolas;
position:absolute;
right:5px;
top:5px;
}
</style>
</head>
<body>
<div class="wrap" id="test">
<ul>
<li date-id="a">
<span>家用电器</span>
</li>
<li date-id="b">
<span>手机/运营商/数码</span>
</li>
</ul>
<div id="sub" class="">
<div id="a" class="sub_content ">
<dl>
<dt>
<a href="#">电视<i>></i></a>
<dd>
<a href="#">合资品牌</a>
<a href="#">国产品牌</a>
<a href="#">互联网品牌</a>
</dd>
</dt>
</dl>
</div>
<div id="a" class="sub_content ">
<dl>
<dt>
<a href="#">冰箱<i>></i></a>
<dd>
<a href="#">美的</a>
<a href="#">海尔</a>
<a href="#">西门子</a>
</dd>
</dt>
</dl>
</div>
</div>
</div>
<script src="../../../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sub=$("#sub");
var activeRow;
var activeNenu;
/*一级菜单添加事件*/
$("#test")
.on('mouseenter',function(e){
sub.removeClass('none')})
.on('mouseleave',function(e){
sub.addClass('none')
if(activeRow){
activeRow.removeClass('active');
activeRow=null;
}
if(activeNenu){
activeNenu.addClass('none');
activeNenu=null ;
}
.on{'mouseenter','li',function(e){
if(activeRow){
activeRow=$(e.target).addClass('active')
activeNenu=$('#'+activeRow.date('id'));
activeNenu.removeClass('none');
return;
}
}
})
</script>
</body>
</html>