Tree menu struktur. Tilføjelse af ekstra niveau

jeg søger en enkelt tilføjelse til nedenstående kode, som giver mig et ekstra niveau i min menu struktur, hvilket jeg umiddelbart ikke selv kan finde ud af.

nedenstående kode er forenklet med tv eksempel.

Jeg ønsker strukturen som følger:

tv
- dr
- tv2
  -tv2
  -charlie
  -zulu

tv2 i nedenstående kode skal altså reagere på samme måde som tv.

Jeg skal nævne at det er til en struktur til en intranetside som vises igennem Lotus-Notes.

Kan dette lade sig gøre med dette JS og i såfald hvordan, eller skal jeg søge andre veje? Håber selvfølgelig på første, da min orginale side er ret så omfattende.

På forhånd tak for hjælpen.

udsnit af kode:

<style>
</style>


<script>
function toggle(e) {
  if (e.style.display == "none") {
document.all.HideShow1.style.display="none";
e.style.display = "";
  } else {
document.all.HideShow1.style.display="none";
e.style.display = "none";
  }
}
</script>

<SCRIPT LANGUAGE="JavaScript">

function makeItVisible(id, event)
{
      document.all[id].style.pixelLeft = (document.body.scrollLeft +
event.clientX) + 60;
      document.all[id].style.pixelTop = (document.body.scrollTop +
event.clientY) - 8;
      document.all[id].style.visibility = "visible";
}
function hideHelp(id, event)
{
      document.all[id].style.visibility = "hidden";
}
</SCRIPT>

<table>

<p class="regular" align="left"><img        src="pil.gif"><a href="#" onclick="toggle(document.all.HideShow1);">
tv</a></p>

<span id=HideShow1 style="display:none">
<p class="submenu" align="left"><img    src="pil.gif"><a href="www.dr.dk">
dr</a><br>
<p class="submenu" align="left"><img    src="/pil.gif"><a href="www.tv2.dk">
tv2</a><br>

</span>
</table>