I am currently redesigning a site of mine, and have been provided with a menu similar to the switch (expanding) type menus.

When a main menu item is clicked, if this item contains sub-menus, these will display below it.

Currently, on a page when clicking on an item containing sub-menus each will expand and when clicking another menu item these will expand as well.

I would like to modify this, so if a main item containing sub-menus is clicked, it will close any other opened sub-menus.

This will prevent the navigation menu from becoming extremely long, so only one set of sub-menus can be displayed at once.

The code I have at present is:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* Menu Navigation Styles */
#menu{
	border:1px solid #000000;
}
#content #menu,#menu li ul{
	list-style:none;
	margin:0px;
}
#menu li,#menu li ul li{
	padding:5px;
	margin:0px;
}
#menu li{
	background:#F0DFBE;
	font-weight:bold;
	color:#D98E16;
	cursor:pointer;
	padding-bottom:5px;
}
#menu li h4{
	background:url(../img/arr_down.gif) no-repeat right;
	font-size:11px;
}
#menu li.over h4{
	background-image:url(../img/arr_right.gif);
}
#menu li a{
	color:#D98E16;
	text-decoration:none;
}
#menu li.over{
	padding-bottom:0px;
}
#menu li ul{
	display:block;
	margin-top:5px;
}
#menu li.over ul{
	display:none;
}
#menu li ul li{
	background:#F7F2E4;
}
#menu li ul li a{
	color:#636363;
	font-weight:normal;
	text-decoration:none;
}
#menu li ul li a:hover{
	color:#636363;
	text-decoration:underline;
}

</style>
<script language="JavaScript" type="text/javascript">startList=function() {
	if(document.getElementById) {
		navRoot = document.getElementById('menu');
		for(i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if(node.nodeName=='LI') {
				node.className='over';
				node.onclick=function() {
					if(this.className!='over')
						this.className='over';
					else
						this.className='';
				}
			}
		}
	}
}
window.onload=startList;</script>
</head>
<body>
<ul id="menu">
  <li>
    <h4>Menu Section 1</h4>
    <ul>
      <li><a href="#">Sublink 11</a></li>
      <li><a href="#">Sublink 12</a></li>
      <li><a href="#">Sublink 13</a></li>
      <li><a href="#">Sublink 14</a></li>
    </ul>
  </li>
  <li>Menu Section 2 
    <ul>
      <li><a href="#">Sublink 21</a></li>
      <li><a href="#">Sublink 22</a></li>
      <li><a href="#">Sublink 23</a></li>
      <li><a href="#">Sublink 24</a></li>
    </ul>
  </li>
  <li><a href="#">Menu Main Link</a></li>
  <li>Menu Section 3 
    <ul>
      <li><a href="#">Sublink 31</a></li>
      <li><a href="#">Sublink 32</a></li>
      <li><a href="#">Sublink 33</a></li>
      <li><a href="#">Sublink 34</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
Thanks in advance for any assistance.

Graham