Css 左填充取决于子AV深度的大小

我有一个垂直导航，子类别有子类别等等

第一组元素需要20px的填充，第二组元素需要40px的填充，以此类推。结果应该是这样的：

我会使用ul和li标签来做类似的事情，因为这样更容易理解和跟踪。下面是我想到的一个东西，它在没有javascript的情况下实现了您的要求：

HTML
<ul>
    <li><a href="#">Item1</a>
        <ul>
            <li>Hello</li>
            <li><a href="#"></a>Hello
                <ul>
                    <li>Bye</li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
</ul>

CSS
ul {
    padding: 0;
}

ul li {
    list-style: none;
}
ul > li {
    padding-left: 20px;
}

---

让我知道这是否为你解决了问题

链接的悬停效果没有我的示例中的100%宽度，因此它不是我锁定的解决方案。@mimo哦，我只是展示了如何使用ul和li实现它。现在更新它。