的HTML

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块，也可以将列表项位置属性设置为相对，并且使用子项的顶部和左侧属性ul不是一个好的解决方案。

我对你的菜单设计了一点，它看起来很好。你可以在这里查看：http://codepen.io/anon/pen/sdomr

垂直css下拉菜单在一列？

的HTML

的CSS

1 个答案: