css - 一列中的垂直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 resets。因为用户代理预定义的样式会给你带来麻烦(试试 Normalize.css)

在 CSS 中:您不需要 float 第二级 ul block ，也不需要将列表项位置属性设置为 relative 并为子级 ul 使用 top 和 left 属性不是一个好的解决方案。

我对您的菜单进行了一些样式设计，看起来不错。你可以在这里查看:http://codepen.io/anon/pen/sdomr