Problema con la creacion de menus

Hola a todos!

Os cuento mi problema, aver si alguien me puede ayudar xD (Seguro que si)

Aver, estoy intentando crear un menu, queria que tuviera unas partes principales y dentro de eso unos submenus (Como viene explicado en la guia) Mi problema es que quiero que esos submenus solo aparezcan cuando pinches en el menu principal correspondiente, osea, das click y debajo se "expande" la celda y aparecen los distintos submenus (en otro color para diferenciarlos por ejemplo).

Me comentaron que hiciera los menus con el Infinite Menu, he creado uno mas o menos parecido a lo que queria (por probar mas que nada) pero el problema es que no se como colocarlo ahora en mi pagina, alguien sabe como colocar ese menu en la pagina?

La otra pregunta: Se podria hacer lo que yo quiero sin ayuda de un programa para crear menu? Si es asi, como se haria?

Espero vuestras respuestas ansioso jaja

Un saludo a todos!
Muchas gracias por el consejo de los script, es mucho mas facil y rapido xD.

Un saludo a todos!
De nuevo me asalta la duda, he conseguido el script de un menu que realmente me ha gustado bastante, el problemas es que viene hecho con 4 bloques, dentro de los cuales hay de 2 a 4 enlaces.

Se añadir nuevos bloques y nuevos enlaces, el problema viene cuando intento quitar algun enlace, los Bloques se "juntan" pasando a ser enlaces de un Bloque, es decir, un bloque es un enlace de otro, luego el bloque que es enlace, no aparece, solo aparece cuando pinchas en el bloque "principal".

Alguien sabria como cambiar los enlaces y bloques? Os dejo aqui el codigo, aver si alguno me hecha un cable, que ando un poco perdido ahora mismo xD.

Un saludo a todos!

<table border="0" width="16%" id="table1" cellspacing="0" cellpadding="3" style="border-collapse: collapse" bordercolor="#111111">
	<tr>
		<td><script language="JavaScript">
function goToURL() { history.go(-1); }
        </script>
  <style>
  .menu
  {
   background-color:#2B6Ebb;
   border:1px solid darkblue;
   width:150px;
   font-size:11px;
   font-family:verdana;
   position: absolute;
   font:bold;
   color: #ffffff;
   cursor: hand;
  }
  .item_panel
  {
    width:150px;
    border-left:1px solid darkblue;
    border-right:1px solid darkblue;
    clip:rect(0,150,0,0);
    position:absolute;
  }
  .item_panel a
  {
   text-decoration:none;
   color:black;
   cursor:hand;
  }
  .item
  {
   background-color: #E9F0F8;
   width: 148px;
   font-size: 10px;
   font-family: verdana;
   
  }
        </style>
  <script language="JavaScript">  
  var height = 20; // height of the menu headers
  var iheight = 15; // height of the menu_items  
  var bgc = "#E9F0F8" // background color of the item
  var tc = "black" // text color of the item  
  var over_bgc = "white";
  var over_tc = "#004891";  
  var speed = 0;
  var timerID = "";
  var N = (document.all) ? 0 : 1;
  var width = 152;
  var self_menu = new Array();
function write_menu()
{
  smc = 0; // count the position of the self_menu
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;  
  for(i=0;i<Link.length;i++)
  {
   la = Link[i].split("|");
   if (la[0] == "0")
   {
    if(start == 0) 
     {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   }
   else
   {
    if(start == 1) 
     {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
       start = 0;
     }
    
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
    csmc++;
   }
  }
  if (start == 0) 
   {
     document.write("</div>");
     h =  csmc * iheight;
     tmn = mn + 5; //-h
     self_menu[smc] = new Array(tmn,h,0);
     name = "down" + (self_menu.length-1);
     obj = document.getElementById(name);
     obj.style.borderBottomColor = "darkblue";
     obj.style.borderBottomWidth = 1;
     obj.style.borderBottomStyle = "solid";
   }
  document.write("</div>");}
function color(obj)
{
 document.getElementById(obj).style.backgroundColor = over_bgc;
 document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
 document.getElementById(obj).style.backgroundColor = bgc;
 document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
 if (timerID == "")
 {
 to = self_menu[nr+1][1]
 begin = nr + 2;
 if (timerID != "") clearTimeout(timerID);
 if (self_menu[nr+1][2] == 0)
 {
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2) {to++;}
  epull_down(begin,to,0);
 }
 else
 {
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++)
  {
   if(self_menu[i][2] == 1) 
    {open_item += self_menu[i][1];
    }
  }
  if (N == false) {open_item-= (c*1)};
  if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  epull_up(begin,to,val);
 }
 }
}

function epull_down(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
 }
 nowv++;
 if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function epull_up(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
 }
 nowv--;
 if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function startup(nr)
{
 write_menu();
 if (nr != 0)
 {
 for(i=0;i<self_menu.length;i++)
 {
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
 }
 }
}  
        </script>
<table width=150><tr><td>
  <script language="JavaScript">
      //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"
  var Link = new Array();
  Link[0] = "0|Bloque 1";
  Link[1] = "1|Enlace1|http://www.rollersky.com|";
  Link[2] = "1|Enlace2|http://www.rollersky.com|";
  Link[3] = "1|Enlace3|http://www.rollersky.com|";
  Link[4] = "1|Enlace4|http://www.rollersky.com|";
  Link[5] = "0|Bloque 2";
  Link[6] = "1|Enlace5|http://www.rollersky.com|";
  Link[7] = "1|Enlace6|http://www.rollersky.com|"
  Link[8] = "0|Bloque 3";
  Link[9] = "1|Enlace7|http://www.rollersky.com|";
  Link[10] = "1|Enlace8|http://www.rollersky.com|";
  Link[11] = "0|Bloque 4";
  Link[12] = "1|Enlace9|http://www.rollersky.com|";
  startup(4);
  </script>
  </td>
 </tr>
</table>






</td>
	</tr>
</table>
Muy facil:
Delante de cada enlace, si te fijas, hay un "0" o un "1". El cero representa el nombre del bloque que no tiene ningun enlace, solo lo abre. El uno, son los enlaces dentro del bloque. Para añadir nuevos bloques debes poner un cero al principio y para los enlaces un uno :wink:

Hasta la proxima!