html - 如何仅使用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; 
}

这是我的代码的 fiddle :

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

如何修复对齐？

Answer 1

您应该在第一层中指定 li 元素 position:relative。这样，子 ul 元素的定位是相对于 li 元素的。

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

top: 0px;
left: 100%;

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