css底部导航带二级菜单 支持移动端

以下是纯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;

}