实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现仿京东二级导航菜单</title>
<style>
body{
margin:0;
}
ul,li{
margin:0;
padding: 0;
list-style: none;
}
a{
color: #999999;
text-decoration: none;
}
a:hover{
color: #FFB800;
}
.nav{
height: 40px;
width: 600px;
background-color: #E3E4E5;
margin:20px auto;
}
.main-menu{
margin:0 15px;
}
.main-menu li{
float:left;
line-height: 40px;
padding:0 15px;
position: relative;
}
.hover {
background-color: #efefef;
}
.sub_menu{
display: none;
background-color: #efefef;
position: absolute;
left: 0;
top:40px;
width: 260px;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="main-menu">
<li><a href="">我的订单</a></li>
<li><a href="">我的京东</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">待处理订单</a></li>
<li><a href="">我的问答</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">降价商品</a></li>
<li><a href="">我的关注</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">企业采购</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">企业订购</a></li>
<li><a href="">商用场景馆</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">工业品</a></li>
<li><a href="">礼品卡</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
var ul = document.querySelector('ul');
var sub_menu = document.querySelectorAll(".sub_menu");
var ulc = ul.children;
for (var i=0;i<ulc.length;i++){
ulc[i].addEventListener('mouseover',function () {
this.classList.add('hover');
this.lastElementChild.classList.add('show');
},false);
ulc[i].addEventListener('mouseout',function () {
this.classList.remove('hover');
this.lastElementChild.classList.remove('show');
},false)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
