CSS / HTML菜单无法正确显示

Question

我正在尝试创建一个2级菜单，其中水平1水平显示，水平2垂直显示。没有花哨的折叠，只是一个简单的sitemap'ish菜单。

现在的样子：

我希望它看起来如何：

我的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.2em BlenderHeavy; color: silver; }

我的css：

{{1}}

我想这很简单，但我是一名新手。

Answer 1

您的HTML无效。

试一试：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在此Fiddle

中修改了您的代码

使用float:left将解决您的问题

希望这会有所帮助