摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三級下拉菜單實例</title><script src="jqu/jq_3.3.1_mi.js"></script&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級下拉菜單實例</title>
<script src="jqu/jq_3.3.1_mi.js"></script>
<style>
body{margin: 0;padding: 0;}
.box{
width: 100%;
background: #0080ff;
}
.nav{
width: 1200px;
height:35px;
background: #0080ff;
margin: 0px auto;
}
.nav li{
width: 100px;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 35px;
text-decoration: none;
margin: 0px 20px;
position: relative;
list-style: none;
float: left;}
.nav .box2{
width: 100px;
position: absolute;
background: #0080ff;
margin: 0px
;padding: 0px;
}
.box2 li{
width: 100px;
height: 35px;
margin: 0px;
border-top: 1px dashed #ddd;
position: relative;
}
.nav2 {
width:100px;
position: absolute;
background: #0080ff;
margin: 0px;padding: 0px;
}
.nav3 {
width:100px;
position: absolute;
background: #0080ff;
;padding: 0px;
left: 100px;
top:0px
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<li>首頁</li>
<li>產(chǎn)品
<ul class="box2">
<li>電腦</li>
<li>充電器</li>
<li class="nav2">手機
<ul class="nav3">
<li>華為</li>
<li>小米</li>
<li>蘋果</li>
<li>三星</li>
<li>中興</li>
</ul>
</li>
<li class="nav2">配件
<ul class="nav3">
<li>充電器</li>
<li>鋼化膜</li>
<li>保護套</li>
<li>電池</li>
<li>數(shù)據(jù)線</li>
</ul>
</li>
</ul>
</li>
<li>新聞
<ul class="box2">
<li>頭條</li>
<li class="nav2">資訊
<ul class="nav3">
<li>國內(nèi)資訊</li>
<li>國際資訊</li>
<li>娛樂八卦</li>
<li>今日熱點</li>
</ul>
</li>
<li class="nav2">企業(yè)新聞
<ul class="nav3">
<li>公司動態(tài)</li>
<li>媒體報道</li>
<li>企業(yè)風(fēng)采</li>
</ul>
</li>
</ul>
</li>
<li>招聘</li>
<li>聯(lián)系</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.box2').hide();
$('.nav3').hide();
$('.nav>li').mouseover(function(){
$(this).find('.box2').slideDown(500);
})
$('.nav>li').mouseleave(function(){
$(this).find('.box2').slideUp(500);
})
$('.box2>li').mouseover(function(){
$(this).find('.nav3').slideDown(500);
})
$('.box2>li').mouseleave(function(){
$(this).find('.nav3').slideUp(300);
})
})
</script>
</body>
</html>
批改老師：西門大官人批改時間：2019-02-17 13:31:05
老師總結(jié)：作業(yè)寫的很好，代碼比較規(guī)范。再接再 勵。