通过CSS实现隐藏下拉菜单鼠标经过伸展的方式

最近在学习过程中，遇到一个问题，设计导航栏的时候，经常会有隐藏的二级菜单，鼠标经过的时候弹出。鉴于尚未学习JS的我，还无法用高级的js来实现此功能，于是通过百度搜索，了解到了纯CSS实现的方法，并写此博文进行记录，加深记忆。

想实现的效果

CSS实现方法：

首先用display：none；来隐藏掉下级菜单，然后设置该下级菜单上级的li元素的鼠标经过的样式，及样式变为：display： block; 这里我可能表达不清，具体看以下代码：

<ul>
    <li>1级</li>
    <li>1级</li>
    <li class="nav-1">1级
        <ul class="nav-2">
            <li>二级</li>
        </ul>
    </li>
</ul>

<style>
    .nav-2 {
        display: none;
        /*先隐藏二级*/
    }
    
    .nav-1:hover .nav-2 {
        display: block;
        /*然后设置鼠标经过取消隐藏*/
    }
</style>

其实这里的意思就是先隐藏，然后鼠标经过显示，非常简单。难点在于应该设置哪个class经过？思考并学习中..