CSS/HTML-меню не отображается правильно

Question

Я пытаюсь создать двухуровневое меню, где уровень 1 отображается горизонтально, а уровень 2 отображается вертикально. Нет фантазии складывания, просто обычное меню sitemap.

Как это выглядит сейчас:

Как бы мне хотелось, чтобы это выглядело:

мой 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.

Answer 1

Ваш HTML-код недействителен.

Попробуйте:

.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

редактировать код в этом Fiddle

float:left использование позволит решить вашу проблему

надеюсь, что это поможет