以下是纯css实现带二级菜单的底部导航,具体的样式可以进行改编,后附图片: <!--div片段-->
<div class="layout-footer"> <div class="bottom_nav"> <a href="${base}/index.html ">首页</a> </div> <div class="bottom_nav"> <div class="layout-submenu"> <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>项目xx</a></div> <div class="sub_menu">项目xx</div> </div> <a>xx服务</a> </div> <div class="bottom_nav"> <div class="layout-submenu"> <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>中心公告</a></div> <div class="sub_menu">中心资讯</div> </div> <a>xx资讯</a> </div> <div class="bottom_nav"> <a>我的账户</a> </div> </div>
<!--css片段-->
.layout-footer {
background-color: #f2f2f2;
height: 50px;
color: black;
position: fixed;
width: 100%;
z-index: 9999;
bottom: 0;
border-top: 1px solid gainsboro;
text-align: center;
}
.bottom_nav {
width: 25%;
float: left;
line-height: 50px;
}
.layout-submenu{
height: 80px;
position: fixed;
width: 25%;
margin-left: -1px;
z-index: 9999;
bottom: 50px;
border: 1px solid gainsboro;
text-align: center;
background-color: white;
display: none;
}
.sub_menu{
line-height: 40px;
vertical-align: middle;
}
.layout-footer .bottom_nav:hover{
border-left: 1px solid gainsboro;
border-right: 1px solid gainsboro;
}
.layout-footer .bottom_nav:hover .layout-submenu{
display: block;
}