美团的导航栏,只有两层,然后我自己加上了第三层导航栏,实现了三级导航栏的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美团三级导航栏</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{margin: 0;padding:0;}
ul{list-style: none;}
li{font-size: 12px;line-height: 40px;color: #A599B2;}
nav{width: 100%;height: 40px;background-color: #F8F8F8;}
div{width: 1180px;margin:0 auto;}
a{color: #A599B2;text-decoration: none;}
.box1{float: left;}
.box1 li{float: left;margin-right: 10px;}
.box2{float: right;}
.box2 li{float: right;margin-left: 35px;}
a:hover{color: #13D1BE;}
.box2 li{position: relative;}
.box2 li ul{position: absolute;}
.box2 li ul li{width: 60px;height:40px;margin-left:-1px;}
.box6{position: absolute;margin-left: 80px;top: 0;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.box4').hide()
$('.box6').hide()
$('.box2>li').mouseover(function(){
$(this).find('.box4').slideDown(500)
})
$('.box2>li').mouseleave(function(){
$(this).find('.box4').slideUp(500)
})
$('.box5').mouseover(function(){
$(this).find('.box6').slideDown(500)
})
$('.box5').mouseleave(function(){
$(this).find('.box6').slideUp(500)
})
})
</script>
</head>
<body>
<nav>
<div>
<ul>
<li><a href="" style="color: #666;">北京</a></li>
<li><a href="" style="color: #666;">切换城市</a></li>
<li><a href="">[ 大厂回族自治区</a></li>
<li><a href="">廊坊</a></li>
<li><a href="">固安县 ]</a></li>
<li><a href="" style="color: #13D1BE;margin-left: 15px;">立即登录</a></li>
<li><a href="">注册</a></li>
</ul>
<ul>
<li><a href="">网站导航</a></li>
<li><a href="">商家中心</a></li>
<li><a href="">手机APP</a></li>
<li ><a href="">我的美团</a>
<ul>
<li><a href="" >我的美团</a></li>
<li ><a href="">用户中心</a>
<ul>
<li><a href="">我的中心</a></li>
<li><a href="">抵用券</a></li>
<li><a href="">设置中心</a></li>
</ul>
</li>
<li><a href="">抵用券</a></li>
<li><a href="">设置中心</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>笔记
jq的滑动
slidDown() 下滑效果
slideUp() 上滑效果
slideToggle() 上面两个函数的集合体,如果元素显示就让它隐藏.反之相反