<DIV class="main_top">

 	.main_top の style z-index:10; 10でなくても良いですが、ツリーを隠すためです。

  </DIV>
  <!--  onmouseleave ここから (マウスがこの範囲から外れた場合ツリーが閉じる)  -->
  <DIV onmouseleave="mOut('all')">
  <ul class="TreeMain">
  <li>
    <div class="child-n">
	<a href="#" target="top">Home</a>
    </div>
  </li>
  <li>
    <div class="child-1">
	<span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(1)" class="child_link" tabindex="-1">Menu 1</a></div>
	<ul ID="Tree1">
	<div class="tStyle">
	<li><a href="#" target="top">Tree 1-1   </a></li>
	<li><a href="#" target="top">Tree 1-2</a></li>        
	<li><span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(2,1)" class="child_link2" tabindex="-1">Tree 1-3</a></div>
	    <ul ID="Tree2">
		<div class="tStyle">
		<li><a href="#" target="top">Tree 2-1   </a></li>
		<li><a href="#" target="top">Tree 2-2</a></li>		サブツリー(2階層ツリー)を増減する場合この灰色部分をコピペ又は削除し
		<li><a href="#" target="top">Tree 2-3</a></li>		ツリー番号を上から順番通りになるよう変更してください。
		<li><a href="#" target="top">Tree 2-4</a></li>		尚、ツリー数変更で JSファイルの tCount の設定変更を忘れないように
	    </div></ul></span>
	</li>

	<li><a href="#" target="top">Tree 1-4</a></li>
	<li><a href="#" target="top">Tree 1-5</a></li>
	</div></ul></span>
    </div>
  </li>
  <li>
    <div class="child-1">
	<span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(3)" class="child_link" tabindex="-1">Menu 2</a></div>
	<ul ID="Tree3">
	<div class="tStyle">
	<li><span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(4,3)" class="child_link2" tabindex="-1">Tree 1-1 </a></div>
	    <ul ID="Tree4">
		<div class="tStyle">
		<li><a href="#" target="top">Tree 2-1  </a></li>
		<li><a href="#" target="top">Tree 2-2</a></li>
		<li><a href="#" target="top">Tree 2-3</a></li>
		<li><a href="#" target="top">Tree 2-4</a></li>
	    </div></ul></span>
	</li>
	<li><a href="#" target="top">Tree 1-2   </a></li>
	<li><a href="#" target="top">Tree 1-3</a></li>
	<li><span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(5,3)" class="child_link2" tabindex="-1">Tree 1-4</a></div>
	    <ul ID="Tree5">
		<div class="tStyle">
		<li><a href="#" target="top">Tree 2-1   </a></li>
		<li><a href="#" target="top">Tree 2-2</a></li>
		<li><a href="#" target="top">Tree 2-3</a></li>
		<li><a href="#" target="top">Tree 2-4</a></li>
	    </div></ul></span>
	</li>
	<li><a href="#" target="top">Tree 1-5</a></li>
	</div></ul></span>
    </div>
  </li> 
  <li>
    <div class="child-1">
	<span class="Tree"><div class="vStyle"><a href="javascript:TreeOpen(6)" class="child_link" tabindex="-1">Menu 3</a></div>
	<ul ID="Tree6">
	<div class="tStyle">
	<li><a href="#" target="top">Tree 1-1 </a></li>	ファーストツリー(1階層ツリー)を増減する場合この灰色部分
	<li><a href="#" target="top">Tree 1-2</a></li>
	<li><a href="#" target="top">Tree 1-3</a></li>
	<li><a href="#" target="top">Tree 1-4</a></li>
	</div></ul></span>
    </div>
  </li>

  <li>
    <div class="child-n">
	<a href="#" target="top">Contact</a>
    </div>
  </li>
  <li>
    <div class="child-n">
	<a href="#" target="top">Acsses</a>
    </div>
  </li>
  </ul>

  <p> </p><p> </p>


  </DIV>
  <!--  ツリー表示部分から外れた所で </DIV> する -->
  <!--  onmouseleave ここまで (非オンマウスの場合クリックでツリーを閉じる) -->

  <!--   #TreeOff ここから  -->
  <DIV class="main_buttom" ID="TreeOff">


	<p> </p>



  </DIV>
  <!--  #TreeOff ここまで  -->

</DIV>