一列中的垂直CSS下拉菜单？

Question

我在css创建了带有两个子菜单的垂直导航菜单。

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

html

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

     <ul>

        <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
      <ul>
             <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>
          </ul>

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

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

的CSS

#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;

}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}


#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;


}

Answer 1

首先，您的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块，并且也不能将列表项的position属性设置为relative，并为子级ul使用top和left属性不是一个好的解决方案。

我给您的菜单添加了一些样式，看起来不错。 您可以在这里查看： http : //codepen.io/anon/pen/sdomr