如何使用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%;

我相应地updated the jsfiddle。请注意，这需要一些额外的调整才能看起来非常好，但我不会为你完成所有的工作。

Answer 2

请查看此更新的代码

    #category-navigation ul li{position:relative; width: 100%; display: inline-block;}
    #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: 0;
        left: 100%;
        z-index: 4;
        width: 100%;
        box-shadow: 5px 5px 5px #CCC;
    }