Dynamic menu problem with DOM, CSS and JavaScript

[Macamba]

Hi all,

I am developing a website for a volunteer organisation. This job is my
first step on website development. I searched for a dynamic menu and
found one that uses the DOM. My problem is the example goes only two
levels deep. E.g.:
Menu 1
--> Sub 1_1
--> Sub 1_2
Menu 2
--> Sub 2_1
--> Sub 2_2
--> Sub 2_3
etc.

I need to go one level deeper. E.g.:
Menu 1
--> Sub 1_1
--> --> Sub 1_1_1
etc.

When I test what I have I can not open the submenu. When I click the
submenu all submenu's close. Can anyone help? Appreciate it.

Macamba

Here is my code:
The JavaScript
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("cont").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}}}

function ChangeClass(menu, newClass){
if (document.getElementById){
document.getElementById(menu).className = newClass;
}}

document.onselectstart = new Function("return false");

This is (part) of my CSS:
..menuOut, .out
{
cursor: pointer;
margin: 7px;
background-color: rgb(246, 220, 1);
color: rgb(183, 1, 102);
width: 170px;
height: 20px;
border: 1px solid rgb(183, 1, 102);
padding: 2px;
font-size: 10pt;
text-align: center;
font-weight: 800;
}

..menuOver, .over, .over a, a:hover
{
cursor: pointer;
margin: 7px;
background-color: rgb(183, 1, 102);
width: 170px;
height: 20px;
border: 1px solid rgb(183, 1, 102);
padding: 2px;
text-align: center;
font-weight: 800;
color: rgb(253, 236, 158);
}

..submenu, .subsubmenu
{
margin: 7px;
color: rgb(183, 1, 102);
width: 170px;
font-family: Verdana, Arial, "sans serif";
font-weight: 800;
font-size: 10pt;
padding-left: 15px;
}

..submenu a, .subsubmenu a
{
font-family: Verdana, Arial, "sans serif";
color: rgb(183, 1, 102);
text-decoration: none;
font-weight: bold;
}

..submenu a:hover, a:hover
{
font-family: Verdana, Arial, "sans serif";
color: rgb(253, 236, 158);
text-decoration: none;
font-style: oblique;
font-weight: bold;
}

Lastly, part of my HTML:
<div id="cont">

<p class="out"
id="menu1"
onmouseover="ChangeClass('menu1','over')"
onmouseout="ChangeClass('menu1','out')">
<a href="accent.html" target=tekst title="Menu 1">Menu without sub
menus</a><br/></p>

<!-- Menu 2 -->
<p class="menuOut" id="menu2" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver')"
onmouseout="ChangeClass('menu2','menuOut')">Menu 2</p>

<!-- Menu 2_1 -->
<div class="submenu" id="sub2" style="display:none;">
<p class="menuOut" id="submenu2_1" onclick="SwitchMenu('sub2_1')"
onmouseover="ChangeClass('submenu2_1','menuOver')"
onmouseout="ChangeClass('submenu2_1','menuOut')">Menu 2_1</p>

<div class="subsubmenu" id="sub2_1" style="display:none;">
• <a href="sub2_1/sub2_1_1.html" target=tekst title="Menu
2_1_1">Menu 2_1_1</a><br/>
• <a href="sub2_1/sub2_1_2.html" target=tekst title="Menu
2_1_2">Menu 2_1_2</a><br/>
• <a href="sub2_1/sub2_1_3.html" target=tekst title="Menu
2_1_3">Menu 2_1_3</a><br/>
• <a href="sub2_1/sub2_1_4.html" target=tekst title="Menu
2_1_4">Menu 2_1_4</a><br/>
</div> <!-- Sub 2_1 -->

<!-- Menu 2_2 -->
<p class="menuOut" id="submenu2_2" onclick="SwitchMenu('sub2_2')"
onmouseover="ChangeClass('submenu2_2','menuOver')"
onmouseout="ChangeClass('submenu2_2','menuOut')">Menu 2_2</p>

<div class="subsubmenu" id="sub2_2" style="display:none;">
• <a href="sub2_2/sub2_2_1.html" target=tekst title="Menu
2_2_1">Menu 2_2_1</a><br/>
• <a href="sub2_2/sub2_2_2.html" target=tekst title="Menu
2_2_2">Menu 2_2_2</a><br/>
• <a href="sub2_2/sub2_2_3.html" target=tekst title="Menu
2_2_3">Menu 2_2_3</a><br/>
• <a href="sub2_2/sub2_2_4.html" target=tekst title="Menu
2_2_4">Menu 2_2_4</a><br/>
</div> <!-- Sub 2_2 -->

<!-- Menu 3, no sub menus -->
<p class="menuOut" id="menu3" onclick="SwitchMenu('sub3')"
onmouseover="ChangeClass('menu3','menuOver')"
onmouseout="ChangeClass('menu3','menuOut')">Menu 3</p>

</div> <!-- Cont -->
</body>
</html>