摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script&g
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 100%;height: 40px;}
.nav{width: 80%;height: 40px;background-color: #666;margin:0 auto;}
a{text-decoration: none;color: red;}
/*ul{overflow: hidden;}*/
/*此处ul不能浮动 不然无法看到下来选项 关键点:::position:relative;在设置下拉的位置*/
ul{height: 40px}
li{text-decoration: none;;list-style: none;float: left;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}
.one>li{width: 20%}
.two>li,.three>li{width: 100%;background-color:#666;border: 0.3px solid #fff }
.two>li:hover,.three>li:hover{background-color:#333;color: #fff }
.two>li{position: relative;}/*重点 必须要设置一个定位*/
.three{position: absolute;;top: 0;left: 100%;width: 100px}
</style>
<script type="text/javascript">
$(function(){
$('.two,.three').hide();
$('.one>li').on('mouseover',function(){
$(this).find('.two').show()
})
$('.one>li').on('mouseleave',function(){
$(this).find('.two').hide()
})
$('.two>li').on('mouseover',function(){
$(this).find('.three').show()
})
$('.two>li').on('mouseleave',function(){/*two>li 必须*/
$(this).find('.three').hide()
})
})
</script>
</head>
<body>
<div class="box">
<div class="nav">
<ul class="one">
<li><a href="">一级导航</a>
<ul class="two">
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a>
<ul class="three">
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
</ul>
</li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
</ul>
</li>
<li><a href="">一级导航</a>
<ul class="two">
<li><a href="">2级导航</a>
<ul class="three">
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
</ul>
</li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
</ul>
</li>
<li><a href="">一级导航</a></li>
<li><a href="">一级导航</a>
<ul class="two">
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a></li>
<li><a href="">2级导航</a>
<ul class="three">
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
<li><a href="">3级导航</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">一级导航</a></li>
</ul>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-21 14:54:36
老师总结：写的很不错 你这也是使用css来进行实现的下拉菜单啊 使用css实现下拉菜单要比js实现简单的多
