实例
css
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单--css</title>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #656565;
}
a:hover{
color: red;
}
.nav{
width: 700px;
height: 40px;
background-color: #E3E4E5;
}
.main-menu{
margin-left: 200px;
border-top: 1px solid #E3E4E5;
}
.main-menu li{
float: left;
line-height: 40px;
text-align: center;
padding: 0 15px;
position: relative;
}
ul li:hover{
background-color: #EFEFEF;
}
.sub-menu{
width: 260px;
background-color: #EFEFEF;
border-bottom: 1px solid #E3E4E5;
border-left: 1px solid #E3E4E5;
border-right: 1px solid #E3E4E5;
/*子菜单绝对定位*/
position: absolute;
top:40px;
left: 0;
/*默认不显示*/
display: none;
}
.main-menu li:hover .sub-menu{
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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单--JavaScript</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #999;
}
a:hover {
color: red;
}
.nav {
width: 700px;
height: 40px;
background-color: #E3E4E5;
}
.main-menu {
margin-left: 200px;
}
.main-menu li {
float: left;
line-height: 40px;
text-align: center;
padding: 0 15px;
/*定位父级*/
position: relative;
}
ul li:hover {
background-color: #EFEFEF;
}
.sub-menu {
width: 260px;
background-color: #EFEFEF;
/*子菜单绝对定位*/
position: absolute;
top: 40px;
left: 0;
/*默认不显示*/
display: none;
}
/*.main-menu li:hover .sub-menu {*/
/* display: block;*/
/*}*/
.active {
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>
<ul>
<li><a href="">商用场景馆</a></li>
<li><a href="">礼品卡</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
// 将css中原有的鼠标hover事件删除或注释掉,改用JS脚本实现
// 先在css中添加一个自定义的类样式: .active {display: block} 备用
// 1. 获取主菜单
var mainMenu = document.getElementsByClassName('main-menu').item(0);
// 2. 获取主菜单所有菜单项并转为数组
var menus = Array.from(mainMenu.children);
// console.log( menus);
// 3. 为每一个主菜单添加鼠标移入与移出事件
menus.forEach(function (menu) {
// 鼠标移入显示二级菜单,移出则隐藏二级菜单
menu.addEventListener('mouseover', show, false);
menu.addEventListener('mouseout', show, false);
});
function show(ev) {
// 二菜菜单是当前主菜单项的最后一个子元素,将'active'动态添加到它上面即可
// console.log( ev.target);
ev.currentTarget.lastElementChild.classList.toggle('active');
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
