abstrak：效果如下： <div class="nav"> <ul class='onebox'> <li name='0'>首頁</li> <li name='1'>產(chǎn)品 <ul class='twobox'>
效果如下：
<div class="nav">
<ul class='onebox'>
<li name='0'>首頁</li>
<li name='1'>產(chǎn)品
<ul class='twobox'>
<li>II產(chǎn)品1</li>
<li>II產(chǎn)品2</li>
<li>II產(chǎn)品3</li>
<li>II產(chǎn)品4
<ul class='threebox'>
<li>III產(chǎn)品1</li>
<li>III產(chǎn)品2</li>
<li>III產(chǎn)品3</li>
<li>III產(chǎn)品4</li>
<li>III產(chǎn)品5</li>
</ul>
</li>
<li>II產(chǎn)品5</li>
<li>II產(chǎn)品6</li>
</ul>
</li>
<li name='2'>新聞</li>
<li name='3'>技術(shù)支持</li>
<li name='4'>聯(lián)系客服</li>
<li name='5'>公司文化</li>
</ul>
<div id="block"></div>
<div class="cl"></div>
</div>
//css>
.nav ul{
list-style: none;
z-index: 20; /*疊層權(quán)重加大，將ul置前*/
/*position: relative;*/
}
.nav ul li{
float: left;
width: 200px;
text-align: center;
line-height: 30px;
height: 30px;
color: #fff;
cursor: pointer;
}
.nav ul li>.twobox li{
width: 200px;
color:red;
text-align: center;
background-color: yellow;
position: relative; /*必須要以其作為父元素相對定位，然后將下一級菜單的ul絕對定位，將其推到右方并且平行*/
}
.nav ul li>.twobox>li:hover{
background: #ccc;
opacity: 0.7;
}
.nav ul li>.twobox li>.threebox{
position: absolute;
top: 0px;
left: 200px;
}
.nav ul li>.twobox li>.threebox li{
background: #ccc;
}
.nav ul li>.twobox li>.threebox li:hover{
background: #fff;
opacity:0.7;
}
//jQuer
$(document).ready(function(){
$('.twobox').hide(); //先隱藏二級菜單
$('.threebox').hide();
// 下拉二級菜單,光標(biāo)懸停檢測到哪個(gè)li含有(find('.twobox'))的子菜單,有的則下滑彈出菜單； 重點(diǎn)知識
$('.onebox>li').mouseover(function(){
$(this).find('.twobox').slideDown(50);
});
// 下拉二級菜單,光標(biāo)懸停檢測到哪個(gè)li含有(find('.twobox'))的子菜單,有的則上滑收回菜單； 重點(diǎn)知識
$('.onebox>li').mouseleave(function(){
$(this).find('.twobox').slideUp(50);
});
// 下拉三級菜單,光標(biāo)懸停檢測到哪個(gè)li含有(find('.twobox'))的子菜單,有的則下滑彈出菜單； 重點(diǎn)知識
$('.twobox>li').mouseover(function(){
$(this).find('.threebox').slideDown(50);
});
// 下拉三級菜單,光標(biāo)懸停檢測到哪個(gè)li含有(find('.twobox'))的子菜單,有的則下滑彈出菜單； 重點(diǎn)知識
$('.twobox>li').mouseleave(function(){
$(this).find('.threebox').slideUp(50);
});
})
Guru membetulkan：查無此人Masa pembetulan：2019-04-27 17:33:50
Rumusan guru：完成的不錯(cuò)，可以把常用的css樣式寫到一個(gè)文件，下次直接可以使用。繼續(xù)加油