CSS / HTML菜单显示不正确

Question

I'm trying to create a 2-level menu where level 1 is displayed horisontally and level 2 is displayed vertically. No fancy folding, just a plain sitemap'ish menu.

How it looks now:

How I would like it to look:

my 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>

my 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; }

This is simple, I suppose, but I am a css rookie.

Answer 1

Your HTML is invalid.

Try it:

 .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.2rem BlenderHeavy; color: silver; } ul ul { padding: 0; } 

 <nav class="menu"> <ul class="lvl1"> <li class="lvl1"><a href="#">Lorem</a> <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> <li class="lvl1"><a href="#">Ipsum</a> <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> <li class="lvl1"><a href="#">Dolor</a> <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> <li class="lvl1"><a href="#">Sit</a> <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> <li class="lvl1"><a href="#">Amet</a> <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> </ul> </nav> 

Answer 2

edited your code in this Fiddle

use float:left will resolve your problem

hope this will help