サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./static/style.css"> <link rel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="./static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="./static/js/jquery.js"></script>
<title>垂直動(dòng)畫導(dǎo)航</title>
<script type="text/javascript">
$(function(){
$('.menu_three,.menu_two').hide();
$('.menu_one').mouseover(function(){
$(this).find('.menu_two').slideDown(100)})
$('.menu_one').mouseleave(function(){
$(this).find('.menu_two').hide(100)})
$('.menu_two li').mouseover(function(){
$(this).find('.menu_three').slideDown(100)})
$('.menu_two li').mouseleave(function(){
$(this).find('.menu_three').hide()})
})
</script>
</head>
<body>
<ul>
<li style="background:red;text-align: center">動(dòng)畫導(dǎo)航菜單</li>
<li><span>php開發(fā)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>php圖文教程</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>php圖文教程 php圖文教程 php圖文教程 php圖文教程 php圖文教程 </span>
</div>
</li>
<li><span>php視頻教程</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span> php視頻教程 php視頻教程 php視頻教程 php視頻教程 php視頻教程 php視頻教程</span>
</div>
</li>
<li><span>php手冊(cè)教程</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span> php手冊(cè)教程 php手冊(cè)教程 php手冊(cè)教程 php手冊(cè)教程 php手冊(cè)教程 php手冊(cè)教程</span>
</div>
</li>
<li><span>php實(shí)戰(zhàn)教程</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span> php實(shí)戰(zhàn)教程 php實(shí)戰(zhàn)教程 php實(shí)戰(zhàn)教程 php實(shí)戰(zhàn)教程 php實(shí)戰(zhàn)教程</span>
</div>
</li>
<li><span>其他機(jī)構(gòu)教程</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span> 其他機(jī)構(gòu)教程 其他機(jī)構(gòu)教程 其他機(jī)構(gòu)教程</span>
</div>
</li>
</ul>
</li>
<li><span>新端開發(fā)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容</span>
</div>
</li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容</span>
</div>
</li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容</span>
</div>
</li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容</span>
</div>
</li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<div>
<span>每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容每三級(jí)導(dǎo)航內(nèi)容</span>
</div>
</li>
</ul>
</li>
<li><span>服務(wù)端開發(fā)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
<li><span>移動(dòng)開發(fā)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
<li><span>數(shù)據(jù)庫(kù)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
<li><span>服務(wù)器運(yùn)維</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
<li><span>在線工具箱</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
<li><span>常用類庫(kù)</span><i class="fa fa-angle-right" aria-hidden="true"></i>
<ul>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
<li><span>二級(jí)導(dǎo)航</span><i class="fa fa-angle-right" aria-hidden="true"></i></li>
</ul>
</li>
</ul>
</body>
</html>*{margin: 0px; padding: 0px;}
.menu{width: 200px;
height: 500px;
background: #0B1218;
margin: 50px;
}
.menu li{
height: 40px;
width: 100%;
line-height: 40px;
list-style: none;
color: #fff;
}
.menu li i{float: right;
margin-top:10px;
margin-right: 30px;
}
.menu .menu_one{width: 100%;
height:40px;
color: #fff;
line-height: 40px;
margin-top: 10px;
position: relative;
}
.menu .menu_one:hover{background: rgba(255,255,255,0.4);}
.menu_one span{
margin-left: 20px;
}
.menu_two{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 200px;
background: #0B1218;
}
.menu_two li span{
margin-left: 20px;
}
.menu_two li{position: relative;}
.menu_two li:hover{background:rgba(255,255,255,0.4);}
.menu_three{
position: absolute;
top: 0px;
left: 200px;
width: 250px;
height: 250px;
background: red;
padding: 10px;
background: #0B1218;
}
.menu_three span{
font-size: 13px;
line-height: 5px;
}
本菜單難點(diǎn)在于二級(jí)菜單和三級(jí)菜單所設(shè)置的相對(duì)定位和絕對(duì)定位，要熟練掌握還有列表中的文字對(duì)齊方式需要增加一個(gè)span來布局才可以分別左右對(duì)齊并且有外邊距
添削の先生：查無此人添削時(shí)間：2019-03-15 09:20:43
先生のまとめ：完成的不錯(cuò)。下次把代碼縮進(jìn)，看著整潔。繼續(xù)加油