垂直css下拉菜单在一列中？

我在

css

中创建了一个带有两个子菜单的垂直导航菜单

但我不知道如何将它们放在一列中以便它们正常工作。 这可能吗

html

---

首先，你的html结构很混乱。干净的结构可以是这样的：

<div id="menu">
  <ul>
    <li>
      <a href="#">works</a>
      <li>
        <a href="#">works subcategory</a>
        <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        </ul>
      </li>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
      <li><a href="#">Category 5</a></li>
    </li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li>
      <a href="#">photos</a>
      <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
      </ul>
    </li>
    <li><a href="#">friends</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

您在结束标记时出错，。。 我建议您在制作下拉菜单时使用css重置。因为用户代理预定义样式会给您带来麻烦（请尝试Normalize.css）

在CSS中：您不需要浮动第二级

ul

块，也可以将“列表项位置”属性设置为“相对”，为子级ul使用“顶部”和“左侧”属性不是一个好的解决方案

---

我给你的菜单做了点样式，看起来不错。您可以在此处查看：

您希望子菜单显示在父项下方吗？您有解决方案吗？谢谢，只是Chategory 1,2,3。。其中第三个子菜单项。我希望子菜单es显示在父项下面

<div id="menu">
  <ul>
    <li>
      <a href="#">works</a>
      <li>
        <a href="#">works subcategory</a>
        <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        </ul>
      </li>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
      <li><a href="#">Category 5</a></li>
    </li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li>
      <a href="#">photos</a>
      <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
      </ul>
    </li>
    <li><a href="#">friends</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>