纯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: 999;
    }
    .navmenu:hover .submenu{
        text-align: left;
        display: inline-block;
    }
</style>
<ul>
    <li class="navmenu"><a href="#">菜单一
    </a>
        <ul class="submenu">
            <li class="navmenu">菜单一1</li>
            <li class="navmenu">菜单二2</li>
            <li class="navmenu">菜单三3</li>
            <li class="navmenu">菜单四4</li>
            <li class="navmenu">菜单五5</li>
        </ul>
    </li>
    <li class="navmenu"><a href="#">菜单二
    </a>
        <ul class="submenu">
            <li class="navmenu">菜单一1</li>
            <li class="navmenu">菜单二2</li>
            <li class="navmenu">菜单三3</li>
            <li class="navmenu">菜单四4</li>
            <li class="navmenu">菜单五5</li>
        </ul></li>
    <li class="navmenu">菜单三</li>
    <li class="navmenu">菜单四</li>
    <li class="navmenu">菜单一</li>
</ul>