<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>