abstract：效果如下： <div class="nav"> <ul class='onebox'> <li name='0'>首页</li> <li name='1'>产品 <ul class='twobox'>
效果如下：
<div class="nav">
<ul class='onebox'>
<li name='0'>首页</li>
<li name='1'>产品
<ul class='twobox'>
<li>II产品1</li>
<li>II产品2</li>
<li>II产品3</li>
<li>II产品4
<ul class='threebox'>
<li>III产品1</li>
<li>III产品2</li>
<li>III产品3</li>
<li>III产品4</li>
<li>III产品5</li>
</ul>
</li>
<li>II产品5</li>
<li>II产品6</li>
</ul>
</li>
<li name='2'>新闻</li>
<li name='3'>技术支持</li>
<li name='4'>联系客服</li>
<li name='5'>公司文化</li>
</ul>
<div id="block"></div>
<div class="cl"></div>
</div>
//css>
.nav ul{
list-style: none;
z-index: 20; /*叠层权重加大，将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();
// 下拉二级菜单,光标悬停检测到哪个li含有(find('.twobox'))的子菜单,有的则下滑弹出菜单； 重点知识
$('.onebox>li').mouseover(function(){
$(this).find('.twobox').slideDown(50);
});
// 下拉二级菜单,光标悬停检测到哪个li含有(find('.twobox'))的子菜单,有的则上滑收回菜单； 重点知识
$('.onebox>li').mouseleave(function(){
$(this).find('.twobox').slideUp(50);
});
// 下拉三级菜单,光标悬停检测到哪个li含有(find('.twobox'))的子菜单,有的则下滑弹出菜单； 重点知识
$('.twobox>li').mouseover(function(){
$(this).find('.threebox').slideDown(50);
});
// 下拉三级菜单,光标悬停检测到哪个li含有(find('.twobox'))的子菜单,有的则下滑弹出菜单； 重点知识
$('.twobox>li').mouseleave(function(){
$(this).find('.threebox').slideUp(50);
});
})
Correcting teacher：查无此人Correction time：2019-04-27 17:33:50
Teacher's summary：完成的不错，可以把常用的css样式写到一个文件，下次直接可以使用。继续加油