无限级树形菜单，CSS样式有个问题想请教下

[小飞牛coder]

功能已经实现了，但是怎样动态的为子节点添加样式，第一个子节点的margin-left:10，子节点的子节点是margin-left:20，子节点的子节点的子节点是margin-left:30，依次推。这个怎么实现呢？我表达的能理解么？我怕我说的不太清楚。

[hookee]

要看DOM的结构，如果节点元素都一样，只要设置margin-left:10px, 用包含的层次实现即可。 <div class="node"> <div class="node"> <div class="node"></div> </div> </div>

[csdn_aspnet]

树型菜单可以显示出一个比较明晰的结构，给予人一目了然的感觉。 　　菜单分为以下几种情况： 　　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，就会容易点了。