实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery导航条三级菜单</title>
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<style>
html,body,div,ul,li,a{
margin: 0;padding: 0;
}
body{
font-size: 14px;
font-family: "微软雅黑";
background: #333;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.box{
height: 50px;
background: #128a28;
}
.box .nav{
width: 1000px;
line-height: 50px;
margin: 0 auto;
position: relative;
z-index: 111;
}
.box .nav li{
float: left;
width: 14.28%;
height: 50px;
line-height: 50px;
text-align: center;
}
.box .nav li a{
color: #fff;
}
.box .nav li .second-nav{
width: 150px;
display: none;
position: relative;
}
.box .nav li .second-nav li{
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
background: #097d1f;
border-top: 1px solid yellow;
}
.box .nav li .second-nav li .third-nav{
width: 150px;
height: 200px;
display: none;
margin-left: 100%;
margin-top: -40px;
}
</style>
<script type="text/javascript">
$(function(){
//显示二级菜单
$('.nav>li').hover(function(){
$(this).find('.second-nav').show();
//显示三级菜单
$(this).find('.second-nav').find('li').hover(function(){
$(this).find('.third-nav').show();
$(this).find('.third-nav').hover(function(){
$(this).show();
},function(){
$(this).hide();
});
}, function(){
$(this).find('.third-nav').hide();
});
//隐藏菜单
},function(){
$(this).find('.second-nav').hide();
});
});
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li><a href="#">手机</a>
<ul class="second-nav">
<li><a href="#">小米</a>
<ul class="third-nav">
<li><a href="#">小米红米</a></li>
<li><a href="#">小米8s</a></li>
<li><a href="#">小米max</a></li>
</ul>
</li>
<li><a href="#">苹果</a>
<ul class="third-nav">
<li><a href="#">苹果max</a></li>
<li><a href="#">苹果7s</a></li>
</ul>
</li>
<li><a href="#">oppo</a></li>
</ul>
</li>
<li><a href="#">电脑</a>
<ul class="second-nav">
<li><a href="#">小米电脑</a></li>
<li><a href="#">华为电脑</a></li>
</ul>
</li>
<li><a href="#">电视机</a>
<ul class="second-nav">
<li><a href="#">小米电视</a>
<ul class="third-nav">
<li><a href="#">50寸电视</a></li>
<li><a href="#">60寸电视</a></li>
<li><a href="#">70寸电视</a></li>
</ul>
</li>
<li><a href="#">华为电视</a></li>
<li><a href="#">夏新电视</a>
<ul class="third-nav">
<li><a href="#">70寸电视</a></li>
<li><a href="#">60寸电视</a></li>
</ul>
</li>
</ul>
<li><a href="#">智能***</a>
<ul class="second-nav">
<li><a href="#">小米***</a>
<ul class="third-nav">
<li><a href="#">小米***1</a></li>
<li><a href="#">小米***2</a></li>
<li><a href="#">小米***3</a></li>
</ul>
</li>
<li><a href="#">华为***</a></li>
<li><a href="#">苹果***</a>
<ul class="third-nav">
<li><a href="#">苹果***1</a></li>
<li><a href="#">苹果***2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例