HTML

首先在.nav-content-box放置多个一级菜单li，和对应的二级下拉菜单ul

<ul class="nav-content-box">
    <li class="index on">
        <span><a href="https://jy.tp.yuanmeng.life/">首页</a></span>
    </li>
    <li class="cat">
        <span><a href="https://jy.tp.yuanmeng.life/js">分类</a></span>
        <ul>
            <li><a href="https://jy.tp.yuanmeng.life/js">自然</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/php">文化</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/js/450.html">地理</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/templates/292.html">历史</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/templates/293.html">生活</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/templates/290.html">社会</a></li>
            <li><a href="https://jy.tp.yuanmeng.life/js/1.html">艺术</a></li>
        </ul>
    </li>
    <li class="special ">
        <span><a href="javascript:void(0)">特色百科</a></span>
        <ul>
            <li><a href="#/calendar/">历史上的今天</a></li>
            <li><a href="#/museum/">数字博物馆</a></li>
        </ul>
    </li>
</ul>

定义下拉导航菜单背景层

.nav-bg{
    position: absolute;
    width: 100%;
    height: 272px;
    background: #24619c;
    background:rgba(36,97,158,.95);
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 9999;
}

显示下拉菜单

.nav-bar:hover{
    overflow: visible;
    -webkit-transition:all 0.5s ease;
    transition:all 0.5s ease;
}