En Joomla uno puede agregar “menus y submenus” con un simple módulo, pero siempre queda la duda de como se hizo o de como lo añadiria en mi Plantilla, bueno en esta ocación les traigo un pequeño tutorial de como agregar el submenu de forma nativa a la plantilla del Joomla.

Primero añadir la posición del menu en el index.php de tu plantilla.

<div class="topmenu">
	<jdoc:include type="modules" name="topmenu" style="raw" />
</div>

Ahora toca crear los Items del menu en el sistema del Joomla.

El siguiente paso sería Publicar el módulo y (como en esta caso va a ser a puro css) Activar la opción de Mostrar siempre los ítems en los submenús

El resto es agregar y editar el CSS:

.topmenu{ z-index:99; float:left; width:100%;}
.topmenu ul{font-family:Verdana, Geneva, sans-serif;font-size:12px; float:right; margin-right:30px;}
.topmenu ul li{float:left; position:relative;}
.topmenu li a{color:#fff;padding:3px 10px;background:url(../images/bg_li.gif) right center no-repeat;}
.topmenu li a:hover, .topmenu li.active a{color:#ea0808;}
.topmenu li ul{ display:none; position:absolute; width:190px; margin:0; padding:10px 3px; line-height:25px; background:#171716;}
.topmenu li:hover ul{ display:block}
.topmenu li li{ float:none;}
.topmenu li.parent:hover{background:#171716;}
.topmenu li li a{ background:none;}

En resumen las únicas líneas que son importantes son estas dos:

.topmenu li ul{ display:none; position:absolute; ...... }
.topmenu li:hover ul{ display:block}

Con la primera linea ocultamos el submenu, y con la segunda lo mostramos cuando pasamos el mouse por encima.

Yo lo hice de esta manera, con eso quiero decir, que no es la unica forma de hacerlo. En posteriores tutoriales iré mostrando mas metodos, pero creo que este es el más sencillo.

Y el resultado seria este: