为列表编写CSS的更好方法

我正在为导航/列表编写CSS，我想将每个子级别的列表项错开5px，我开始编写：

    .panel ul li ul li a { padding:6px 0 6px 20px !important; background-color:#333; background-position:10px center; }
    .panel ul li ul li ul li a { padding:6px 0 6px 25px !important; background-color:#444; background-position:15px center; }
    .panel ul li ul li ul li ul li a { padding:6px 0 6px 30px !important; background-color:#555; background-position:20px center; }
    .panel ul li ul li ul li ul li ul li a { padding:6px 0 6px 35px !important; background-color:#666; background-position:25px center; }
    .panel ul li ul li ul li ul li ul li ul li a { padding:6px 0 6px 40px !important; background-color:#777; background-position:30px center; }

并认为“这太荒谬了，一定有更好的方法”不管有多少层都有可能保持缩进

如有任何意见，将不胜感激

---

谢谢

对于纯CSS，没有比这更好的方法了。我建议使用，with可以让您以嵌套形式编写CSS，例如

.panel {
    ul {
        li {
            a {
                padding:6px 0px 6px 20px;
            }
            ul {
                li {
                    a{...}
                } 
            }
       }
    }
 }

jquery是键：） 没有尝试下面的代码。但它看起来应该与此类似

$('.panel li').each( function(){
var myPadding = $(this).parent.css('padding') + 5;
$(this).css('padding' , myPadding );})

---

CSS3中有什么可以帮助您的吗？我不需要支持更老的浏览器。我在想，也许可以使用第n个子元素或其他什么，但这不适用于嵌套元素。据我所知，这里没有任何CSS3选择器可以帮助您。您还可以使用JavaScript以编程方式应用这些样式；这可能是一个更好的选择，因为它似乎有一个模式。重新阅读你的问题-你想实现什么？嵌套列表会自动缩进，无需CSS进行缩进。很好的一点是，网站“重置”CSS会将所有内容剥离出来，最好是沿着jQuery的道路冒险，谢谢。感谢您的输入，是的，每个级别可能会有一个以上的li，因为它是由CMSS生成的菜单，直到jQuery是关键。我使用'each'它将以任何级别循环div面板内的所有li这不是嵌套列表的目的吗？

上的填充没有任何样式。。。。你有你想要它的样子吗？