Tengo este menu desplegable y quisiera saber como hacer para que pueda desplegar mas de un item por vez. El problema es que cuando quiero desplegar el segundo me colapsa el anterior.
Aqui les dejo el codigo del menu:
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="186" colspan="3" align="left" valign="top"><!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle"><br>
</div>
<div class="menutitle" onClick="SwitchMenu('sub1')"><a href="#">seccion 1 </a><br></div>
<div class="menutitle" onClick="SwitchMenu('sub2')"><a href="#">seccion 2 </a><br></div>
<div class="menutitle" onClick="SwitchMenu('sub3')"><a href="#">seccion 3</a></div>
<div class="menutitle" onClick="SwitchMenu('sub4')"><a href="#">seccion 4</a></div>
<div class="menutitle" onClick="SwitchMenu('sub5')"><a href="#">seccion 5</a></div>
<div class="menutitle" onClick="SwitchMenu('sub6')">seccion 6</div><span class="submenu" id="sub6">
<a href="#">Nro. 1<br></a>
<a href="#">Nro. 2<br></a>
<a href="#">Nro. 3<br></a>
</span>
<div class="menutitle" onClick="SwitchMenu('sub7')">seccion 7</div>
<span class="submenu" id="sub7">
<a href="#">Nro. 1</a><br>
<a href="#">Nro. 2<br>
Nro. 3</a><br>
<br>
</span></div> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>