CSS/HTMLメニューが正しく表示されない

Question

レベル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新人です。

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が

が、これは