This is the basic concept of the collapsible menu, you will need yourself to edit the style and links. Paste this code somewhere in the head:
Code
<script type="text/javascript">
function switchit(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else {
listElementStyle.display="none";
}
}
</script>
Paste this code where you want your menu to appear:
Code
<ul>
<a href="javascript:switchit('column1')">First Menu</a>
<li id="column1">
<ul >
<li><a href="http://www.tutorio.com/free/10-Marketing-SEO-tutorials">Marketing-SEO.</a></li>
<li><a href="http://www.tutorio.com/free/8-Photoshop-tutorials">Photoshop.</a></li>
<li><a href="http://www.tutorio.com/free/9-Serverside-tutorials">Serverside.</a> </li>
</ul>
</li>
</ul>
<ul>
<a href="javascript:switchit('column2')">Second Menu</a>
<li id="column2">
<ul >
<li><a href="http://www.tutorio.com/free/11-Clientside-tutorials">Clientside.</a></li>
<li><a href="http://www.tutorio.com/free/7-Flash-tutorials">Flash.</a></li>
</ul>
</li>
</ul>
If you have any questions feel free to ask them here.
Code by http://www.tutorio.com/tutorial/javascript-expanding-menu