如何使用CSS构建多级菜单？

Question

我的CSS有问题.我正在创建一个垂直菜单但我的问题是我不知道如何将第二级别的类别与第一级对齐.这也是从第二级到第三级的问题; 它也与父级别对齐.

我的格式是这样的:

Parent 1
   - Second Level 1
      - Third Level 1
      - Third Level 2
      - Third Level 3
Parent 2
   - Second Level 2
      - Third Level 1
      - Third Level 2
      - Third Level 3

这是我想要的输出:

这是我的CSS:

#category-navigation ul ul { display: none }
#category-navigation ul li:hover > ul { 
    display: inline-block;
    position: absolute;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    top: 20px;
    left: 15%;
    z-index: 4;
    width: 30%;
    box-shadow: 5px 5px 5px #CCC;
}

#category-navigation ul.parent { 
    border-bottom: 1px solid #ccc; 
    padding: 7px 0px;
}

#category-navigation ul.parent li { 
   border-bottom: 1px solid #ccc; 
   padding: 7px 0px; 
}

这是我的代码的小提琴:

http://jsfiddle.net/rochellecanale/4fh680uv/8/

如何修复对齐？

Answer 1

您应该li在第一层中提供元素position: relative.这样,子ul元素的定位与元素相关li.

要将子ul元素放在元素旁边li,您可以给它们

top: 0px;
left: 100%;

我相应地更新了jsfiddle.请注意,这需要一些额外的调整,看起来非常好,但我不会为你做所有的工作.