CSS/HTML menu not showing correctly

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

apparently I'm a HTML-rookie as well ... your suggestion did the job ... thanks — Jesper
– Jesper, Commented Sep 2, 2016 at 11:32

dippas · Accepted Answer · 2016-09-02 10:59:43Z

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>

Kunal Navhate · Accepted Answer · 2016-09-02 10:59:36Z

0

edited your code in this Fiddle

use float:left will resolve your problem

hope this will help

answered Sep 2, 2016 at 10:59

Kunal Navhate

1087 bronze badges

Collectives™ on Stack Overflow

CSS/HTML menu not showing correctly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related