네 또 오셨네요.^^
xe 공식 레이아웃도 제 사이트와 마크업은 크게 다를게 없습니다. css 에서 수정만 된것이라고 할수 있습니다.
그럼 설명을 드릴테니 순서대로 해보시면 될듯합니다.

1. 트리메뉴 레이아웃을 다운받아서 경로에 맞게 xe공식스킨에 똑같이 업로드 합니다.
images 폴더안에 dtree_img 와 js 폴더에 dtree.js 를 말합니다. 이두개만 똑같은 위치에 업로드를 하시면 됩니다.

2. xe공식스킨의 layout.html 파일을 열어서 상단 <!--%import("js/xe_official.js")--> 아래 <!--%import("js/dtree.js")--> 를 추가합니다.

그리고 아래소스를

<!-- 왼쪽 2차 메뉴 -->
   <img src="./images/blank.gif" alt="" class="mask" />

            <!--@if($menu_1st)-->
   <ol id="lnb">
                {@ $idx = 1 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
    <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>

                    <!-- main_menu 3차 시작 -->
                    <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
     <ul>
                    <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
      <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
                    <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
    </li>
                {@$idx++}
                <!--@end--><!--@end-->
   </ol>
            <!--@end-->

  </div>

아래 소스로 바꿔줍니다.

 <!-- 왼쪽 2차 메뉴 -->
   <div id="dtree">
    <script type="text/javascript">

     d = new dTree('d');

     var x,y,z;
     x=0;
     y=10;
     z=100;

     d.add(0,-1,'main','{$layout_info->index_url}','','');

     <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
      x=x+1;d.add(x,0,'{$val['link']}','{$val['href']}');
      <!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
       y=y+1;d.add(y,x,'{$val1['link']}','{$val1['href']}');
       <!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])-->
        z=z+1;d.add(z,y,'{$val2['link']}','{$val2['href']}');
       <!--@end--><!--@end-->
      <!--@end--><!--@end-->
     <!--@end--><!--@end-->

     document.write(d);

    </script>
    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
   </div>

3. xe공식스킨의 적용하실려는 css 파일을 열어서 적당한 위치에 아래소스를 넣습니다.
/* Dtree lnb */
#dtree { padding:10px 0 0 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; }
#dtree img { border: 0; vertical-align: middle; }
#dtree a { color: #333; text-decoration: none; }
#dtree a.node { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.node:hover { color: #333; text-decoration: underline; }
#dtree a.nodeSel:hover { color: #333; text-decoration: underline; }
#dtree a.nodeSel { background-color: #fff; }
#dtree .clip { overflow: hidden; }
#dtree p { padding:0 10px 0 0; text-align:right; }

4. js 폴더의 dtree.js 파일을 여시고 아래 소스를 찾습니다.
var dtree_icon_path  = "./layouts/jjang/images/dtree_img/";

위소스를 xe공식스킨이름 xe_official 로 바꿔줍니다. 그럼다음과 같아지겠네요.
var dtree_icon_path  = "./layouts/xe_official/images/dtree_img/";

이상입니다.^^

마지막으로 하위메뉴가 나오게 할려면 관리자에서 메뉴에 가셔서 하위메뉴 추가를 해주시면 자동으로 붙습니다.