With a little formatting this will do the trick.

**** There are no usage restrictions on this script.****

Firstly, the JS, to be inserted in the head of your HTML document.

<script type="txt/javascript"> var persistmenu="yes"

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
   if(document.getElementById){
   var el = document.getElementById(obj);
   var ar = document.getElementById("masterdiv").getElementsByTagName("span");
      if(el.style.display != "block"){
         for (var i=0; i<ar.length; i++){
            if (ar[i].className=="submenu")
            ar[i].style.display = "none";
         }
         el.style.display = "block";
      }else{
         el.style.display = "none";
      }
   }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
error(1): function not defined
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>


then the HTML

<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">         <a href="index.html" class="menutitle2" title="Link 1 home.">Link 1</a>
</div>
<div class="menutitle" onclick="SwitchMenu('sub2')">Link 2</div>
<span class="submenu" id="sub2">
<a href="sublink1/" class="submenu2" title="Sublink1.">Sub-Link 1</a>
</ br>
<a href="subLink2/" class="submenu2" title="Sub-Link 2">Sub-Link 2</a>
</ br>
</div>
</div>

NOTE: Your "SwitchMenu" identifier's must be numerically ascending, so when you add additional menus you will need sub3, sub4, sub5, on all your Menus (not subMenus).


then the styles classes, which are formatted for a current project of mine (which is in a presently distressed design state), so they WILL need some editing- this goes in your external CSS file.


.menutitle
{
border: 1px 0px 1px 0px;
border-style: solid;
border-color: #9DA5A0;
color: #CDDEFC;
font-family: Verdana, Geneva, Arial, sans-serif;
font-variant: caps;
letter-spacing: 2px;
font-size: 11px;
padding: 3px 10px 3px 20px;
margin: 2px 0px 0px 0px;
cursor: hand;
}
      
.menutitle:hover
{
background-color: #7A7C7B;
cursor: hand;
}
         
.menutitle2
{
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 11px;
text-decoration: none;
border-width: 0px;
color: #CDDEFC;
}

.menutitle2:hover
{
color: #666;
}

.submenu2
{
background-color: #F8F8F8;
border-width: 0px;
letter-spacing: 1px;
}

.submenu2:hover
{
color: #CDDEFC;
background-color: #E1F7BF;
}

Hope this helps!

http://forum.stylegala.com/viewtopic.php?t=1977&sid=8420ae59d6eed1897b580076a2376f55

sitewide toggle submenus display/hide

toggle menu persist

JavaScript