<!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-U[**]-Compatible" content="ie=edge" />
<title>Document</title>
<!--jquery的cnd地址,如果失效请自行引入jquery-->
<script src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.container{
width:960px;
margin:0px auto;
height:100px;
border:1px solid red;
}
.item{
width: 126px;
height: 30px;
line-height: 30px;
background-color: #eee;
margin-top: 32px;
margin-left: 40px;
text-align: center;
position:relative;
}
.drop-down{
width: 100px;
height: 184px;
background: #999;
position: absolute;
left: 12px;
top: 40px;
display: none;
}
</style>
</head>
<body>
<div class="container" id="main">
<div class="item">
产品分类
<div class="drop-down" id="drop">
<ul>
<li>服务器</li>
<li>CPU</li>
<li>机箱</li>
<li>硬盘</li>
<li>SSD</li>
<li>显卡</li>
</ul>
</div>
</div>
</div>
</body>
<script>
$("#main").on("mouseover",(e)=>{
var target = e.target;
if($(target).hasClass("item") || $(target).parents(".item").length>0){
$("#drop").show();
}
})
$("#main").on("mouseout",(e)=>{
var target = e.target;
if(!$(target).hasClass("item")){
$("#drop").hide();
}
})
</script>
</html>
