<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.anv{
width: 200px;
height: 500px;
margin-left: 50px;
background: red;
}
.anv p{
margin-left: 12px;
padding-top: 20px;
}
.anv p i{
margin-left: 10px;
font: 400 20px/14px consolas;
}
.wrap{
position: absolute;
width: 200px;
left: 50px;
top:50px;
/*background: #1B6D85;*/
}
ul{
padding: 15px 0;
margin: 9;
list-style: none;
/*background: #6c6669;*/
background: red;
color: #FFFFFF;
border-right-width:0 ;
}
/*ul p{
display: block;
padding-left: 12px;
}*/
li{
display: block;
height: 30px;
line-height: 30px;
padding-left: 12px;
cursor: pointer;
font-size: 14px;
position: relative;
}
.active{
background: #FFFFFF;
color: red;
}
/*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: 50px;
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-left: 5px;
/*border-top: 1px solid #EEEEEE;*/
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="anv">
<!--<p><img src="../img/素材/icon/18.png"/><i>商品分类</i></p>-->
<div class="wrap" id="test">
<ul>
<li data-id="a">
<span>家用电器</span>
<i></i>
</li>
<li data-id="b">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
<li data-id="c">
<span>手机、运营商、数码</span>
</li>
</ul>
</div>
<div id="sub" class="none">
<div id="a" class="sub_content none">
<dl>
<dt>
<a href="">手机通讯<i><!-->-->|</i></a>
</dt>
<dd>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
<a href="#">手机维修</a><a href="#">手机</a>
</dd>
</dl>
<dl>
<dt>
<a href="">洗衣机<i><!-->-->|</i></a>
</dt>
<dd>
<a href="">合租平牌</a>
<a href="">国产平牌</a>
<a href="">日不平牌</a>
<a href="">合租平牌</a>
</dd>
</dl>
</div>
<div id="b" class="sub_content none">
<dl>
<dt>
<a href="">手机通讯<i><!-->-->|</i></a>
</dt>
<dd>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
<a href="#">手机维修</a><a href="#">手机</a>
</dd>
</dl>
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var sub = $('#sub')
var activeRow
var activeMenu
$('#test')
.on('mouseenter',function(e) {
sub.removeClass('none')
})
.on('mouseleave',function(e) {
sub.addClass('none')
if(activeRow){
activeRow.removeClass('active')
activeRow = null
}
if(activeMenu){
activeMenu.addClass('none')
activeMenu = null
}
})
.on('mouseenter','li',function(e){
if(!activeRow){
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
activeRow.removeClass('active')
activeMenu.addClass('none')
activeRow = $(e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
})
})
</script>
</body>
</html>
https://github.com/ccccccl/JD-has-no-delayed-menu
代码不完全一样，根据理解实现了功能。欢迎点赞。