abstrak：<!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>財務(wù)中心</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>
Guru membetulkan：滅絕師太Masa pembetulan：2019-02-13 17:18:29
Rumusan guru：完成的不錯,備注還是需要詳細點,繼續(xù)加油!