html - 水平 CSS 下拉菜单

Question

我想在 CSS 中制作一个水平下拉菜单。但是，它垂直显示:

我希望最上面的两个菜单项是水平的。除了制作一行表格，我还能做什么？

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}

<ul>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>

Answer 1

您可以尝试 float 列表项:

.root {
  overflow: hidden; /* clear float */
}
.root > li {
  float: left;
}

<ul class="root">
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>