NEED HELP!!! Expanding vertical menu

I’ve been searching all over the internet for a vertical navigation script that will do what I want… I thought I found it, but there’s one problem. The site has 8 navigation items, only one has a submenu. So I wanted all the buttons to highlight as you roll over them, but I wanted the “Prints” button to expand to show the 5 submenu items. But I want those items to stay “open” until another main item is clicked on. In other words, I’d like all the submenu items to stay visible in case users want to look at one of the other submenu items.

Here’s the code:

<style type=”text/css”>
.menuOut {cursor:pointer; margin:0px; background-color:#414141; color:#000000; width:180px; border:1px solid #FFFFFF; padding:6px; text-align:left; font-family:verdana; font-weight:bold;}
.menuOver {cursor:pointer; margin:0px; background-color:#893430; color:#FFFFFF; width:180px; border:1px solid #FFFFFF; padding:6px; text-align:left; font-family:verdana; font-weight:bold;}
.submenu {width:180px; font-family:verdana; font-size:11px; padding-left:5px;}
.submenu a {color:#000000; text-decoration:none; font-weight:none;}
.submenu a:hover {color:#893430; text-decoration:none; font-style:none; font-weight:none;}
</style>
<script type=”text/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[i].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 true”);
</script>

********************
And here’s the menu in the body:

<td><!– Menu start –>

<div id=”cont”>

<p id=”menu1″ class=”menuOut” onmouseover=”ChangeClass(‘menu1′,’menuOver’)” onmouseout=”ChangeClass(‘menu1′,’menuOut’)”>
<font color=”#FFFFFF”>
<a href=”default.htm”>
<span style=”text-decoration: none”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”>Home</font></span></a></font></p>

<p id=”menu2″ class=”menuOut” onmouseover=”ChangeClass(‘menu2′,’menuOver’)” onmouseout=”ChangeClass(‘menu2′,’menuOut’)”>
<font color=”#FFFFFF”>
<a href=”about.htm”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”><span style=”text-decoration: none”>About the Artist</span></font></a></font></p>

<p id=”menu3″ class=”menuOut” onmouseover=”ChangeClass(‘menu3′,’menuOver’)” onmouseout=”ChangeClass(‘menu3′,’menuOut’)”>
<font color=”#FFFFFF”>
<a href=”originals.htm”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”><span style=”text-decoration: none”>Originals</span></font></a></font></p>

<p id=”menu4″ class=”menuOut” onclick=”SwitchMenu(‘sub4’)” onmouseover=”ChangeClass(‘menu4′,’menuOver’)” onmouseout=”ChangeClass(‘menu4′,’menuOut’)”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”>Prints</font></p>
<div class=”submenu” id=”sub4″ style=”display:none;”>
• <a href=”print_info.htm” title=”Print information”>Print Information</a><br/>
• <a href=”landscapes.htm” title=”Landscapes”>Landscapes</a><br/>
• <a href=”local_landmarks.htm” title=”Local landmarks”>Local Landmarks</a><br/>
• <a href=”florals.htm” title=”Florals”>Florals</a><br> <i>&nbsp;&nbsp;&nbsp; also birds and butterflies</i><a href=”florals.htm” title=”Florals”></i></a><br/>
• <a href=”animals.htm” title=”Animals”>Animals</a><br/>
</div>

<p id=”menu5″ class=”menuOut” onmouseover=”ChangeClass(‘menu5′,’menuOver’)” onmouseout=”ChangeClass(‘menu5′,’menuOut’)”>
<font color=”#FFFFFF”>
<a href=”commissioned.htm”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”><span style=”text-decoration: none”>Commissioned Artwork</span></font></a></font></p>

<p id=”menu6″ class=”menuOut” onmouseover=”ChangeClass(‘menu6′,’menuOver’)” onmouseout=”ChangeClass(‘menu6′,’menuOut’)”>
<font color=”#FFFFFF”>
<a href=”whats_new.htm”>
<span style=”text-decoration: none”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”>What’s New?</font></span></a></font></p>

<p id=”menu7″ class=”menuOut” onmouseover=”ChangeClass(‘menu7′,’menuOver’)” onmouseout=”ChangeClass(‘menu7′,’menuOut’)”>
<a href=”calendar_gallery.htm”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”><span style=”text-decoration: none”>Calendar
&amp; Gallery Info</span></font></a></p>

<p id=”menu8″ class=”menuOut” onmouseover=”ChangeClass(‘menu8′,’menuOver’)” onmouseout=”ChangeClass(‘menu8′,’menuOut’)”>
<font color=”#FFFFFF”><a href=”order_form.htm”>
<span style=”text-decoration: none”>
<font color=”#FFFFFF” face=”Verdana” style=”font-size: 9pt”>Order Form</font></span></a></font></p>

</div>
<!– Menu end –></td>
?

Also in #JavaScript _↴