纯CSS实现鼠标悬浮式二级菜单

//情景一：boostrap框架下
<style>
    .fmenu {
        position: relative;
    }


    .fmenu .fsubmenu {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);

        background-color: #0b5ed7;
        width: 200px;
        display: none;
    }

    .fmenu:hover .fsubmenu {
        display: block;

    }

</style>

<div class="fmenu">标题
    <div class="submenu  fsubmenu">
        <div class="">第二列</div>
        <div class="">第三列</div>
        <div class="">第二列</div>
        <div class="">第三列</div>
    </div>
</div>

//情景二：纯HTML

<style>

    .navmenu{
        float: left;
        width: 100px;
        text-align: center;
        background-color: #bacbe6;
    }

    .submenu{
        display: none;
        float: left;
        z-index: 9