Adding an additional submenu to a collapsible/expandable menu

Hello All,

I am in the process of creating a 2/3 level collapsible/exspanible menu
(called "nav") where users can click on a category and have the
submenus appear beneath it and so on (allow users to click on another
category and have that expand).

Example:
Currently the code below allows the users to the drill down one level,
but I want it to be able to drill down an additional level. Any help
would be much appreciated.

Jonathan


Current Code:
*************** *************** *************** *************** *************** *
<style type="text/css">
#nav {width: 170px; height: 500px}
#nav, #nav ul, #nav li {margin: 0; padding: 0; list-style: none;}
#nav li {clear: both;}
#nav li b {display: block; height: 1.2em; color: white; background:
#000033; width: 100%; border-top: thin solid #CCCCCC; padding: 4px;}
#nav li ul li a {display: block; height: 1.2em; width: 100%; padding:
4px; text-decoration: none; color: black; background: #ededed;
border-top: thin solid #CCCCCC;}
#nav li ul li {font-size: 92%; border: #000033; background: none;}
#nav li ul li a:hover {color: #000033; background: orange; }
</style>

<script type="text/javascript">

function setCookie (name, value, path, domain, secure, expires)
{
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTSt ring() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function getCookie (name)
{
var dc = document.cookie ;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1)
{
begin = dc.indexOf(pref ix);
if (begin != 0) return null;
}
else
{
begin += 2;
}
var end = document.cookie .indexOf(";", begin);
if (end == -1)
{
end = dc.length;
}
return unescape(dc.sub string(begin + prefix.length, end));
}

function deleteCookie (name, path, domain)
{
if (getCookie(name ))
{
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}


function addLoadEvent (func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}

</script>

<script type="text/javascript">

function menu_init ()
{
var menu = document.getEle mentById('nav') ;
var subs = menu.childNodes ;

var j = 0;

for (var i=0 ; subs[i]; i++)
{
if (subs[i].tagName=='LI')
{
hs = subs[i].getElementsByT agName('B');
heading = hs[0];
ss = subs[i].getElementsByT agName('UL');
submenu = ss[0];

j++;

heading.onclick = function () { menu_toggle(thi s); };

if (getCookie('men u'+j)=='1')
submenu.style.d isplay = 'block';
else if (getCookie('men u'+j)=='0')
submenu.style.d isplay = 'none';
else if (j==1)
submenu.style.d isplay = 'block';
else
submenu.style.d isplay = 'none';
}
}
}

function menu_toggle (heading)
{
var section = heading.parentN ode;
var submenus = section.getElem entsByTagName(' UL');
var submenu = submenus[0];

if (submenu.style. display=='none' )
submenu.style.d isplay = 'block';
else
submenu.style.d isplay = 'none';

var j = 0;

var menu = document.getEle mentById('nav') ;
var subs = menu.childNodes ;
for (var i=0 ; subs[i]; i++)
{
if (subs[i].tagName=='LI')
{
hs = subs[i].getElementsByT agName('B');
h = hs[0];
j++;

if (h==heading && submenu.style.d isplay=='none')
setCookie('menu '+j, '0', '/');
else if (h==heading)
setCookie('menu '+j, '1', '/');
}
}


}

addLoadEvent(me nu_init);

</script>

<!--[if IE 6]>
<script type="text/javascript">
// Suckerfish-like code to get B:hover working in IE 6.
function sucker_bold ()
{
bs = document.getEle mentById("nav") .getElementsByT agName('B');
for (i=0; bs[i]; i++)
{
node = bs[i];
node.onmouseove r=function() { this.className+ =" over"; }
node.onmouseout =function() { this.className= this.className. replace("
over", ""); }
}
}
addLoadEvent(su cker_bold);
</script>
<![endif]-->

<DIV id=leftNavConta iner>
<ul id="nav">
<li>
<b>Corporate Information</b>
<ul>
<li><a href="#">Corpor ate
Overview</a></li>
<li><a href="#">Remote Sites</a></li>
</ul>
</li>
<li>
<b>Department s</b>
<!--<ul>-->
<ul>
<li><a href="#">Human
Resources</a></li>
<!-- <li><a href="">HR Staff</a></li>
<li><a href="">HR Forms</a></li>
<li><a href="">Benefit s</a></li>
</ul>-->
<li><a
href="#">Accoun ting</a></li>
<!-- <ul>
<li><a href="">Account ing
Staff</a></li>
<li><a href="">Organiz ational
Chart</a></li>
</ul>-->
</ul>
</li>

</ul>
</div>
*************** *************** *************** *************** *************** *************** ***************