无限级树形菜单，CSS样式有个问题想请教下
功能已经实现了，但是怎样动态的为子节点添加样式，第一个子节点的margin-left:10，子节点的子节点是margin-left:20，子节点的子节点的子节点是margin-left:30，依次推。这个怎么实现呢？我表达的能理解么？
我怕我说的不太清楚。
[解决办法]
要看DOM的结构，如果节点元素都一样，只要设置margin-left:10px, 用包含的层次实现即可。
<div class="node">
<div class="node">
<div class="node"></div>
</div>
</div>
[解决办法]
树型菜单可以显示出一个比较明晰的结构，给予人一目了然的感觉。
菜单分为以下几种情况：
1、有子菜单的菜单，这里称文件夹菜单；
1.1、打开的文件夹菜单；
1.1.1、不是最后位置的打开的文件夹菜单，如图：点击查看原图；
1.1.2、最后位置的打开的文件夹菜单，如图：点击查看原图；
1.2、关闭的文件夹菜单；
1.2.1、不是最后位置的关闭的文件夹菜单，如图：点击查看原图；
1.2.2、最后位置的关闭的文件夹菜单，如图：点击查看原图；
2、无子菜单的菜单；
2.1、不是最后位置的无子菜单的菜单，如图：点击查看原图；
2.2、最后位置的无子菜单的菜单，如图：点击查看原图；
HTML代码：
<div id="wrapper">
<div class="qxd_tree">
<div class="qxd_tree_node">
<a href="#" class="qxd_has_drop qxd_drop_show"><span>菜单一</span></a>
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop qxd_cur"><span>子菜单一</span></a>
<a href="#" class="qxd_has_drop qxd_drop_show"><span>子菜单二</span></a>
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop"><span>子菜单二一</span></a>
<a href="#" class="qxd_no_drop"><span>子菜单二二</span></a>
</div>
<div class="qxd_tn_last">
<a href="#" class="qxd_has_drop qxd_drop_show qxd_unfold_last_menu"><span>子菜单三</span></a>
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop"><span>子菜单三一</span></a>
<a href="#" class="qxd_no_drop qxd_last_menu"><span>子菜单三二</span></a>
</div>
</div>
</div>
</div>
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop"><span>菜单二</span></a>
</div>
<div class="qxd_tree_node">
<a href="#" class="qxd_has_drop qxd_drop_show"><span>菜单三</span></a>
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop"><span>子菜单一</span></a>
<a href="#" class="qxd_no_drop qxd_last_menu"><span>子菜单二</span></a>
</div>
</div>
<div class="qxd_tree_node">
<a href="#" class="qxd_has_drop qxd_drop_hidden"><span>菜单四</span></a>
<div class="qxd_tree_node collapse">
<a href="#" class="qxd_no_drop"><span>子菜单一</span></a>
<a href="#" class="qxd_no_drop"><span>子菜单二</span></a>
</div>
</div>
<div class="qxd_tn_last">
<div class="qxd_tree_node">
<a href="#" class="qxd_no_drop qxd_last_menu"><span>菜单五</span></a>
</div>
</div>
</div>
</div>
<!--[if IE 6]>
<script type="text/javascript">
document．execCommand('BackgroundImageCache', false, true);
</script>
<![endif]-->
这里每个菜单区块用了一个类为qxd_tree_node的div包了起来，以实现无限嵌套，当菜单区块最为最后一个时，又多给了一个div的 容器，类名为qxd_tn_last，用于遮住竖起虚线，因为这里是菜单图片用的是css背景的方式，所以最后一个区块做了单独处理。
CSS代码：
body,div,ul,li,a,h2 { margin: 0; padding: 0; }
body { font: 12px/1.6 Arial; }
a { text-decoration: none; }
#wrapper { margin: 100px; }
.qxd_tree a { display: block; width: 80px; height: 18px; line-height: 18px; *line-height: 21px; overflow: hidden; margin-left: -15px; padding-left: 15px; }
.qxd_tree .qxd_tree_node a span { display: block; }
.qxd_tree .qxd_tree_node { padding-left: 15px; background: url(images/tree-line.gif) repeat-y; }
.qxd_tree .qxd_tree_node .qxd_has_drop { background: url(images/bg_qxd_tree.gif) no-repeat 0 -218px; }
.qxd_tree .qxd_tree_node .qxd_fold_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 1px; }
.qxd_tree .qxd_tree_node .qxd_has_drop span { padding-left: 17px; background: url(images/bg_qxd_tree.gif) no-repeat 0 -365px; }
.qxd_tree .qxd_tree_node .qxd_drop_hidden span { background: url(images/bg_qxd_tree.gif) no-repeat 0 -292px; }
.qxd_tree .qxd_tree_node .qxd_no_drop span { padding-left: 17px; background: url(images/bg_qxd_tree.gif) no-repeat 1px -587px; }
.qxd_tree .qxd_tree_node .qxd_drop_show { background: url(images/bg_qxd_tree.gif) no-repeat 0 -144px; }
.qxd_tree .qxd_tree_node .qxd_unfold_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 -73px; }
.qxd_tree .qxd_tree_node a.qxd_no_drop { background: url(images/bg_qxd_tree.gif) no-repeat 0 -439px; }
.qxd_tree .qxd_tree_node a.qxd_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 -519px; }
.qxd_tree .qxd_tree_node .qxd_cur { font-weight: bold; }
.qxd_tree .qxd_tree_node .collapse { display: none; }
/*为了遮住虚线*/
.qxd_tree .qxd_tn_last { background: #fff; position: relative; left: -15px; }
.qxd_tree .qxd_tn_last .qxd_tree_node { margin-left: 15px; }
.qxd_tree .qxd_tn_last .qxd_has_drop { margin-left: 0px; }
很多树型菜单的图片都是采用img形式，做完此效果后，我发现可能用img形式会简单点，但我还是采用了css图片方式，图片方式要对背景进行处理，最主要的就是遮住虚线，这里在子节点给了白色背景颜色遮住父节点的背景图片。
HTML与CSS是为编写JS打下基石，在此基石之上再去编写JS，就会容易点了。
