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

我的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; 
}

下面是我的代码：

---

如何固定对齐？

您应该在第一层

位置：相对
中给出
li
元素。这样，子
ul
元素的位置相对于
li
元素

要将子
ul
元素定位到
li
元素旁边，您可以给它们

top: 0px;
left: 100%;

因此，我同意。请注意，这需要一些额外的调整才能看起来很好，但我不会为您做所有的工作。
请查看此更新的代码

#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;
    }
#类别导航ul li{位置：相对；宽度：100%；显示：内联块；}
#类别导航ul{显示：无；}
#类别导航ul li:悬停>ul{
显示：内联块；
位置：绝对位置；
背景色：#F5；
边框：1px实心#CCC；
排名：0；
左：100%；
z指数：4；
宽度：100%；
盒影：5px 5px 5px#CCC；
}
谢谢，先生，我的css真的很差。：）甚至你的html也不是完美的。请在关闭标记时遵循正确的语法。好的，很抱歉。：）我修改了代码并添加了一些css。检查此链接^Goodjob。我只是想指出他的分数有多差，你能解释一下你改变了什么，以及为什么这达到了提问者的要求吗？