abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>美團三級導航欄</title> <script type="text/javascript" src="jque
<!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="">[ 大廠回族自治區(qū)</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() 上面兩個函數的集合體,如果元素顯示就讓它隱藏.反之相反
Professeur correcteur：韋小寶Temps de correction：2019-03-11 17:11:58
Résumé du professeur：寫的很不錯 使用JavaScript來實現下拉菜單明顯是沒有使用css來實現方便的 總結的也很不錯