效果图：
实现代码：
给出的HTML代码为整个块的代码，从left-bottom开始是二级分类菜单部分，用==号进行了划分
<div id="middle-one">
<div class="one-left">
<div class="left-top">
<span>优车诚品今日在售二手车</span>
<span id="num">3535</span>
<input type="text" placeholder="请输入汽车品牌或车型">
<button>搜索</button>
</div>
<hr style="margin:0 auto;width:455px;border:0.5px solid black;">=============================================================================================
<div id="left-bottom">
<ul>
<li>
<p> ￥选择价格</p>
<div class="a">
<a>5-8万</a>
<a>8-10万</a>
<a>10-15万</a>
<a>15-20万</a>
<a>20-30万</a>
<a>30-50万</a>
<a>50万以上</a>
</div>
</li>
<li>
<p> *选择品牌</p>
<div class="a">
<a>宝马</a>
<a>奥迪</a>
<a>奔驰</a>
<a>别克</a>
<a>大众</a>
<a>日产</a>
<a>丰田</a>
<a>本田</a>
<a>现代</a>
<a>马自达</a>
</div>
<div class="more">
<div id="m-left">
<p style="color:crimson;">A
<a href="#">奥迪</a>
</p>
<p style="color:crimson;">B
<a href="#">比亚迪</a>
<a href="#">宝马</a>
<a href="#">标致</a>
<a href="#">奔驰</a>
<a href="#">别克</a>
<a href="#">保时捷</a>
<a href="#">奔腾</a>
<a href="#">本田</a>
</p>
<p style="color:crimson;">C
<a href="#">长安轿车</a>
<a href="#">长城</a>
</p>
<p style="color:crimson;">D
<a href="#">大众</a>
<a href="#">道奇</a>
</p>
<p style="color:crimson;">F
<a href="#">丰田</a>
<a href="#">福特</a>
<a href="#">菲亚特</a>
<a href="#">法拉利</a>
</p>
<p style="color:crimson;">G
<a href="#">GMC</a>
<a href="#">观致汽车</a>
<a href="#">广汽</a>
</p>
<p style="color:crimson;">H
<a href="#">华泰</a>
<a href="#">红旗</a>
<a href="#">哈弗</a>
</p>
<p style="color:crimson;">J
<a href="#">捷豹</a>
<a href="#">吉利帝豪</a>
<a href="#">Jeep</a>
<a href="#">江淮</a>
<a href="#">江铃</a>
</p>
<p style="color:crimson;">K
<a href="#">凯迪拉克</a>
<a href="#">克莱斯勒</a>
</p>
<p style="color:crimson;">L
<a href="#">兰博基尼</a>
<a href="#">雷克萨斯</a>
<a href="#">铃木</a>
<a href="#">猎豹汽车</a>
<a href="#">林肯</a>
<a href="#">路虎</a>
<a href="#">雷诺</a>
</p>
</div>
<div id="me-right">
<p style="color:crimson;">M
<a href="#">奥迪</a>
</p>
<p style="color:crimson;">N
<a href="#">纳智捷</a>
</p>
<p style="color:crimson;">O
<a href="#">欧宝</a>
<a href="#">讴歌</a>
</p>
<p style="color:crimson;">Q
<a href="#">起亚</a>
</p>
<p style="color:crimson;">R
<a href="#">荣威</a>
<a href="#">日产</a>
</p>
<p style="color:crimson;">S
<a href="#">斯柯达</a>
<a href="#">斯巴鲁</a>
<a href="#">Smart</a>
<a href="#">三菱</a>
</p>
<p style="color:crimson;">W
<a href="#">沃尔沃</a>
</p>
<p style="color:crimson;">X
<a href="#">雪佛兰</a>
<a href="#">雪铁龙</a>
<a href="#">现代</a>
</p>
<p style="color:crimson;">Y
<a href="#">野马汽车</a>
<a href="#">英菲迪尼</a>
</p>
<p style="color:crimson;">Z
<a href="#">中华</a>
<a href="#">众泰</a>
</p>
</div>
<div id="m-right"></div>
</div>
</li>
<li>
<p> &选择类型</p>
<div class="a">
<a>轿车</a>
<a>微型车</a>
<a>小型车</a>
<a>SUV</a>
<a>MPV</a>
<a>跑车</a>
</div>
</li>
<li>
<p> #选择车系</p>
<div class="a">
<a>宝马3系</a>
<a>宝马5系</a>
<a>奥迪A4L</a>
<a>奥迪A6L</a>
<a>C级</a>
<a>E级</a>
<a>君越</a>
<a>高尔夫</a>
</div>
<div class="more"></div>
</li>
</ul>
</div>============================================================================================================
</div>
<div id="myCarousel" class="one-right carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="1.jpg"></div>
<div class="item"><img src="2.jpg"></div>
<div class="item"><img src="3.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>CSS代码部分：因为上面布局也给出了其他部分的代码，CSS也给出相应的CSS代码，依然===划分二级代码部分
#middle-one{
width:100%;
height:315px;
margin-top:20px;
}
#middle-one .one-left .left-top{
width:100%;
height:75px;
color:white;
font-wight:bold;
font-size:12px;
font-family:"隶书";
}
#middle-one .one-left .left-top span:first-child{
display:block;
width:80px;
float:left;
margin-left:10px;
margin-top:10px;
}
#num{
display:block;
width:112px;
float:left;
margin-left:10px;
font-size:40px;
font-weight:bold;
}
#middle-one .one-left .left-top input{
width:150px;
height:35px;
margin-top:10px;
margin-left:40px;
}
#middle-one .one-left .left-top button{
width:54px;
height:33px;
color:black;
font-size:16px;
margin-top:10px;
background-color:white;
border:none;
margin-left:5px;
}===================================================================================
#left-bottom ul li{
list-style-type:none;
width:237.51px;
height:105px;
float:left;
position:relative;
}
#left-bottom ul li:hover{
background:#352111;
}
#left-bottom ul li .more{
width:550px;
height:315px;
position:absolute;
background:white;
left:237.51px;
z-index:11;
display:none;
border:1px solid darkgray;
}
#left-bottom ul li.hover .more{
display:block;
}
a:link,a:visited,a:hover,a:active{
text-decoration:none;
cursor:pointer;
}
#left-bottom ul li p{
color:white;
font-weight: bold;
}
#left-bottom .a{
width:190px;
margin:0 auto;
}
#left-bottom .a a{
color:white;
}
#m-left{
color:crimson;
font-size:16px;
margin-left:10px;
height:315px;
width:300px;
float:left;
}
#m-left p{
width:300px;
height:20px;
}
#m-left p a{
font-size:12px;
color:slategray;
font-weight:normal;
}
#m-left p a:hover{
background-color:crimson;
color:white;
}
#me-right{
height:315px;
width:220px;
float:right;
font-size:16px;
}
#me-right p{
height:20px;
}
#me-right p a{
font-size:12px;
color:slategray;
font-weight:normal;
}
#me-right p a:hover{
background-color:crimson;
color:white;
}===========================================================================================js部分：
$("#left-bottom ul li").hover(function(){
//鼠标移上去
var index=$(this).index();
if(index==1){
$(this).find(".more").css("top","-87px");
$(this).addClass("hover");//添加class=“hover”去掉more块的display：none设置
}else if(index==3){
$(this).find(".more").css("bottom","-18px");
$(this).addClass("hover");//添加class=“hover”去掉more块的display：none设置
}
},function(){
//鼠标移开
$(this).removeClass("hover");//鼠标移开去掉class=“hover”，more块被隐藏
});
转载自原文链接, 如需删除请联系管理员。
原文链接：web前端-仿优车诚品首页二级分类菜单，转载请注明来源！