摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jQuery/jquery-3.3.1.min.js"></scr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/csss/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin: 0; padding: 0;}
.nav_3,.nav_4{position:absolute;left: 150px; top:0px;}
</style>
<title>三级导航下拉导航</title>
</head>
<body>
<script>
$(document).ready(function(){
//导航背景色
$('.nav').css({'width':'100%', 'height':'50px', 'background':'rgb(209, 219, 223)',})
//css样式
$('.nav_top').css({'width':'1200px;', 'height':'50px', 'background':'blue', 'borderRadius':'10px',
'boxShadow':'0px 6px 30px #ccc inset', ' margin':'0px auto'
})
$('.nav_top').css({'width':'1200px', 'height':'50px', 'background':'blue', 'borderRadius':'10px',
'boxShadow': '0px 6px 30px #ccc inset', 'margin':'0px auto'})
$('.nav_1 li').css({'listStyle':'none', 'float':'left', 'borderRight': '1px solid ghostwhite',
' height': '50px', 'width':'150px', 'lineHeight':'50px', 'textAlign': 'center',
'fontSize':'18px', 'color':' ghostwhite'})
$('.nav_2 li').css({'width':'150px', 'height':'50px', 'background':'lightpink', 'color':'black',
'position': 'relative'})
$('.nav_3,.nav_4').css({'position':'absolute', 'left':'150px', 'top':0px'})
//隐藏二级 三级 四级
$('.nav_2,.nav_3,.nav_4').hide()
//点击1级显示2级 移出不显示
$('.nav_b').hover(
function(){
$(this).find('.nav_2').show()
},
function(){
$(this).find('.nav_2').hide()
}
)
//点击2级显示3级 移出不显示
$('.nav_c').hover(
function(){
$(this).find('.nav_3').show()
},
function(){
$(this).find('.nav_3').hide()
}
)
//点击3显示4级 移出不显示
$('.nav_d').hover(
function(){
$(this).find('.nav_4').show()
},
function(){
$(this).find('.nav_4').hide()
}
)
//点击li变背景色和字体变大 移开不显示
$('.nav_b li').hover(
function(){
$(this).css({'background':'pink','color':'blue','fontSize':'25px'})
},
function(){
$(this).css({'background':'lightpink','color':'black','fontSize':'18px' })
}
)
})
</script>
<div class="nav">
<div class="nav_top">
<ul class="nav_1">
<li class="nav_b">首页
<ul class="nav_2">
<li class="nav_c">会员中心
<ul class="nav_3">
<li>分销中心</li>
<li>我的收入</li>
<li>我的订单</li>
<li class="nav_d">我的推荐
<ul class="nav_4">
<li>一级会员</li>
<li>二级会员</li>
<li>三级会员</li>
</ul>
</li>
</ul>
</li>
<li>财务中心</li>
<li>商家中心</li>
</ul>
</li>
<li class="nav_b">美容护肤
<ul class="nav_2">
<li>面膜</li>
<li class="nav_c">精华液
<ul class="nav_3">
<li>牡丹精华</li>
<li class="nav_d">红石榴
<ul class="nav_4">
<li>抗氧化</li>
<li>精华</li>
<li>原液</li>
</ul>
</li>
<li>玻尿酸</li>
</ul>
</li>
<li>面霜</li>
</ul>
</li>
<li>彩妆香水</li>
<li>日用洗护</li>
<li>超值特价</li>
<li>海外精品</li>
</ul>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-13 17:18:29
老师总结：完成的不错,备注还是需要详细点,继续加油!
