Vertical drop down menu

I found this code:

[B]In HEAD section:[/B]

<script type=”text/javascript”>
<!–
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById(‘smenu’+i)) {document.getElementById(‘smenu’+i).style.display=’none’;}
}
if (d) {d.style.display=’block’;}
}
//–>
</script>

[B]In BODY section:[/B]

<dl id=”menu”>
<dt onclick=”javascript:show();”><a href=”#”>Menu 1</a></dt>

<dt onclick=”javascript:show(‘smenu2’);”>Menu 2</dt>
<dd id=”smenu2″>
<ul>
<li><a href=”#”>sub-menu 2.1</a></li>
<li><a href=”#”>sub-menu 2.2</a></li>
<li><a href=”#”>sub-menu 2.3</a></li>
</ul>
</dd>

<dt onclick=”javascript:show(‘smenu3’);”>Menu 3</dt>
<dd id=”smenu3″>
<ul>
<li><a href=”#”>sub-menu 3.1</a></li>
<li><a href=”#”>sub-menu 3.1</a></li>
<li><a href=”#”>sub-menu 3.1</a></li>
<li><a href=”#”>sub-menu 3.1</a></li>
<li><a href=”#”>sub-menu 3.1</a></li>
<li><a href=”#”>sub-menu 3.1</a></li>
</ul>
</dd>

<dt onclick=”javascript:show(‘smenu4’);”>Menu 4</dt>
<dd id=”smenu4″>
<ul>
<li><a href=”#”>sub-menu 4.1</a></li>
<li><a href=”#”>sub-menu 4.1</a></li>
</ul>
</dd>

</dl>

How modify this code for this:

Menu 1
…..Sub-menu 1.1
……….Sub-menu 1.1.1
……….Sub-menu 1.1.2
……….Sub-menu 1.1.3
……….Sub-menu 1.1.4
……….Sub-menu 1.1.5
……….Sub-menu 1.1.6
…..Sub-menu 1.2

Menu 2
…..Sub-menu 2.1
…..Sub-menu 2.2
……….Sub-menu 2.2.1
……….Sub-menu 2.2.2
……….Sub-menu 2.2.3
…..Sub-menu 2.3
…..Sub-menu 2.4
…..Sub-menu 2.5
…..Sub-menu 2.6

Menu 3
…..Sub-menu 3.1
…..Sub-menu 3.2
…..Sub-menu 3.3
…..Sub-menu 3.4
…..Sub-menu 3.5

Menu 4
…..Sub-menu 4.1
…..Sub-menu 4.2
…..Sub-menu 4.3

Menu 5
…..Sub-menu 5.1
…..Sub-menu 5.2

BR
Pumpkin

Also in #JavaScript _↴