專案需求如下，遍歷三級商品分類樹，二級和三級同屬一個DIV，商品分類樹尼瑪老生常談的問題了，於是在category_tree.lbi實現程式碼如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.my_left_category2{display:block; float:left; width:196px; font-size:12px; height:144px; _height:148px; padding-top:0px; border:2px #676767 solid; border-top:none;}
.my_left_category2 dt{height:33px; line-height:33px; background:url(images/category_bg.jpg) no-repeat; border-bottom:#CCC 1px solid; margin:0 5px 0 5px;}
.my_left_category2 dt .a1{font-size:14px; width:135px; margin-left:2px; padding-left:23px; display:block;height:30px;line-height:30px;float:left;  font-weight:bolder ; color:#333333;}
.my_left_category2 .category_over .a1{font-size:14px; font-weight:bold; color:#333; border:1px solid #4b941e; border-right:none;}
.my_left_category2 .category_over .a1:hover{color:#1b578a}
.category_over_box{display:none; margin-top:20px; _margin-top:0px; *margin-top:0px; margin-top:0px9;}
.category_over_box .f_l{width:53px; text-align: right; padding-right:7px; float:left; font-weight:bold; color:#cc0000}
.category_over_box .f_l a{padding:0 6px; white-space:nowrap; color:#cc0000}
.category_over_box .f_r{width:420px; float:left; text-align:left; line-height:18px; color:#CCCCCC}
.category_over_box .f_r b{font-weight:normal; height:18px; line-height:18px; float:left;}
.category_over .category_over_box{display:block; background:#FFF ; border:1px solid #4b941e; width:506px; position:absolute; margin-left:160px; *margin-left:-4px; _margin-left:-4px; margin-top:0px; z-index:998}
.category_over_box ul{padding:0 10px;}
.category_over_box ul li{border-bottom:1px solid #ffefdd7; line-height:21px; height:auto; padding:6px 0}
.dang{display:none; margin-top:1px; margin-left:-2px;}
.category_over .dang{display:block}
-->
</style>

<div style="width:200px; float:left; padding-bottom:10px;">
<div class="module" style=" padding:0px; margin:0px;">
    <div class="caption" style="background:url(images/category_title_bg.jpg) no-repeat; width:200px; height:38px; line-height:36px; overflow:hidden; float:left">
      <font style="float:left; color:#FFF;">商品分類</font>
    </div>


    <div class="my_left_category2">

                  <!--{foreach from=$categories item=cat}-->
	      <dt onmouseover="this.className='category_over'" onmouseout="this.className=''" class="">
              <a class="a1"  href="{$cat.url}">{$cat.name|escape:html}</a>
         
	  
	  
	  <div class="category_over_box">
             
	    <ul class="clearfix">
	    <!--{foreach from=$cat.cat_id item=child}-->
                                <li>
                  <div style="clear:both"></div>
                  <div class="f_l"> <a class="over_2" href="{$child.url}">{$child.name|escape:html}</a></div>

		   
                  <div class="f_r"><!--{foreach from=$child.cat_id item=childer}-->
                                        <b> | <a class="over_3" href="{$childer.url}">{$childer.name|escape:html}</a> </b>
                                     <!--{/foreach}-->
                                      </div>
				      
                  <div style="clear:both"></div>
                </li>
   <!--{/foreach}-->
            </ul>
          </div>
          <img class="dang" style="position: relative; float:left" src="images/dang.gif">
        </dt>
                <!--{/foreach}--> 

	</div>
</div>
</div></span>