CSS / HTML 메뉴가 올바르게 표시되지 않음

레벨 1이 수평으로 표시되고 레벨 2가 세로로 표시되는 2 단계 메뉴를 만들려고합니다. 멋진 접기가 아니라 평범한 사이트 맵 메뉴입니다.

현재 모습 :

내가보기를 원하는 방법 :

내 HTML :

<nav class="menu">
    <ul class="lvl1">
        <li class="lvl1"><a href="#">Lorem</a></li>
            <ul class="lvl2">
                <li class="lvl2"><a href="#">Vino</a></li>
                <li class="lvl2"><a href="#">Fino</a></li>
                <li class="lvl2"><a href="#">Dolce</a></li>
                <li class="lvl2"><a href="#">Vita</a></li>
                <li class="lvl2"><a href="#">Mamma Mia</a></li>             
            </ul>
        <li class="lvl1"><a href="#">Ipsum</a></li>
            <ul class="lvl2">
                <li class="lvl2"><a href="#">Vino</a></li>
                <li class="lvl2"><a href="#">Fino</a></li>
                <li class="lvl2"><a href="#">Dolce</a></li>
                <li class="lvl2"><a href="#">Vita</a></li>
                <li class="lvl2"><a href="#">Mamma Mia</a></li>             
            </ul>
        <li class="lvl1"><a href="#">Dolor</a></li>
            <ul class="lvl2">
                <li class="lvl2"><a href="#">Vino</a></li>
                <li class="lvl2"><a href="#">Fino</a></li>
                <li class="lvl2"><a href="#">Dolce</a></li>
                <li class="lvl2"><a href="#">Vita</a></li>
                <li class="lvl2"><a href="#">Mamma Mia</a></li>             
            </ul>
        <li class="lvl1"><a href="#">Sit</a></li>
            <ul class="lvl2">
                <li class="lvl2"><a href="#">Vino</a></li>
                <li class="lvl2"><a href="#">Fino</a></li>
                <li class="lvl2"><a href="#">Dolce</a></li>
                <li class="lvl2"><a href="#">Vita</a></li>
                <li class="lvl2"><a href="#">Mamma Mia</a></li>             
            </ul>
        <li class="lvl1"><a href="#">Amet</a></li>
            <ul class="lvl2">
                <li class="lvl2"><a href="#">Vino</a></li>
                <li class="lvl2"><a href="#">Fino</a></li>
                <li class="lvl2"><a href="#">Dolce</a></li>
                <li class="lvl2"><a href="#">Vita</a></li>
                <li class="lvl2"><a href="#">Mamma Mia</a></li>             
            </ul>
    </ul>
</nav>

내 CSS :

.menu ul {list-style: none; }
ul.lvl1 {display: table; }
li.lvl1 {display: table-cell; font: bold 1.8em BlenderHeavy; color: white; }
ul.lvl2 {display: block; }
li.lvl2 {display: block; font: normal 1.2em BlenderHeavy; color: silver; }

이것은 간단하지만 나는 CSS 신인입니다.