Jesper Jesper - 3 months ago 6
CSS Question

CSS/HTML menu not showing correctly

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 it looks now

How I would like it to look:

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

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>

Comments