En este mundo, existe gente que es una auténtica pasada y hace cosas que son impresionantes, para muestra, este maravilloso menú que traigo hoy.
En este menú podremos encontrar 5 submenús totalmente diferentes y muy fácil de personalizar, con tener un conocimiento básico de HTML podríamos cambiar muchas cosas según nos convenga.
Si no teneis idea de HTML no os preocupeis, a la hora de personalizarlo encontraréis diferentes indicaciones que os dirán como hacer lo siguiente:
Cambiar colores
Cambiar Tamaños
Añadir Imágenes... etc
Por cierto antes de olvidarme, para el tuto necesitaréis esta imagen.
Es la que colocaréis de flechitas
Código HTML:
Ahora vienen los Menús Desplegables, recordad, que si queréis utilizar uno, simplemente tenéis que añadirlo donde indica en la Barra Horizontal , uno detrás de otro y en el orden deseado
En Color Rosa os he indicado las URL que tenéis que cambiar. La primera, es para que al pinchar en Inicio os lleven a la página principal del blog. El segundo enlace corresponde con la imagen que se ve en el ejemplo.
En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo
En Verde tenéis el título del desplegable.
En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo
En Verde tenéis el título del desplegable.
En Color Verde tenéis el título del desplegable y los títulos de las diferentes categorías. Si queréis añadir más enlaces, simplemente copiar y pegar la siguiente linea y repetirla siguiendo la lógica que se m
En Dorado os dejé el texto a modificar, nombres de enlaces, títulos de categorías.. y como siempre, el nombre del menú desplegable.
En Color Verde son los enalces de las imágenes.
En Dorado os dejé el texto a modificar
Este es el desplegable más sencillo, tenemos en Rosa direcciones en Dorado nombres de las direcciones, creo que no hace falta explicar mucho más. Si queréis añadir más lineas.. pues copiar y pegar la siguiente y listo. Si queréis menos lineas.. todo es borrar.
Si tenéis alguna duda entonces intentaré ayudaros en lo posible.
.... Sigue Leyendo....
En este menú podremos encontrar 5 submenús totalmente diferentes y muy fácil de personalizar, con tener un conocimiento básico de HTML podríamos cambiar muchas cosas según nos convenga.
Si no teneis idea de HTML no os preocupeis, a la hora de personalizarlo encontraréis diferentes indicaciones que os dirán como hacer lo siguiente:
Cambiar colores
Cambiar Tamaños
Añadir Imágenes... etc
Por cierto antes de olvidarme, para el tuto necesitaréis esta imagen.
Es la que colocaréis de flechitas
- Inicio
Bienvenido !
Hola y bienvenidos aquí! Esto es una muestra de las posibilidades de este impresionante Mega menú desplegable.
Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc.Navegadores Soportados
Este mega menú ha sido testeado en los principales navegadores. - 5 columnas
Este es un ejemplo de un recipiente grande con 5 columnas
Se trata de un cuadro de texto de color gris oscuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Esto es un ejemplo de un texto en cursiva. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.Esto es un ejemplo de un texto en negrita. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.He aquí algunos contenidos con imágenes laterales
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.Read more...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.Read more...Esto es un cuadro negro, lo puedes usar para resaltar contenidos. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus. - 4 columnas
Esto es un título de inicio
Some Links
Useful Links
Other Stuff
Misc
- 3 columnas
Listado en Cajas
He aquí algunos ejemplos de imágenes
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.Read more...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Read more...
Código CSS:
Como siempre, este código puede ir dentro de vuestro código del blog, o en el mismo gadget donde coloquéis el código.
<style>
#menu { /* Esta parte es con respecto a la barra horizontal */
position: relative;
z-index: 1000;
overflow: visible !important;
list-style:none;
width:640px; /* Ancho de la barra */
margin:100px auto 0px auto; /* margen de colocación */
height:43px; /* Alto de la barra del menú */
padding:0px 20px 0px 20px; /* margenes interiores */
/* Esquinas redondeadas */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Color de fondo y degradados */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* 1ºcolor superior, 2ºcolor inferior */
/* Bordes*/
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px; /* separación entre Home, 5 Columns y 4 Columns */
margin-top:7px; /* Altura de los menús en la barra horizontal */
border:none;
color: #000; /* Menu desplegable: Color textos y títulos */
}
#menu li:hover {
border: 1px solid #777777; /* borde de los menús pero dentro del rectangulo del menú principal */
padding: 4px 9px 4px 9px; /* distancias superiores, inferiores etc de los menús al pasár el ratón por encima (los menús dentro de la barra) */
/* Color de fondo y degradados */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Esquinas redondeadas */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a { /* Diferentes modificaciones sobre el texto de la barra de menú*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px; /* tamaño del texto */
color: #EEEEEE; /* Color texto */
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000; /* Sombra texto */
}
#menu li:hover a { /* Diferentes modificaciones sobre el texto de la barra de menú al pasar el ratón */
color:#161616;
text-shadow: 1px 1px 1px #ffffff; /* Sombra texo del menú al pasar el ratón*/
}
#menu li .drop {
padding-right:21px;
background:url("URL Flecha") no-repeat right 8px; /* Flecha oscura*/
}
#menu li:hover .drop {
background:url("URL Flecha") no-repeat right 7px; /* Flecha clara*/
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto; /* Menú desplegable: Alto del menú desplegable con respecto a la barra horizontal */
float:left;
position:absolute;
left:-999em; /* Oculta el menú desplegable, Viene siendo no Tocar o se amontonan los menus */
text-align:left;
padding:10px 5px 10px 5px; /* Menú desplegable: Tamaño del menú desplegable */
border:1px solid #777777; /* Menú desplegable: borde y color del menú desplegable */
border-top:none;
/ * Fondo degradado * /
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* 1ºcolor superior, 2ºcolor inferior */
/* Bordes redondeados*/
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
/* Anchos de los Desplegables */
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Menu desplegable: Modifica distancias entre el texto y la caja principal */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
/* Modifica anchos de diferentes partes del menú desplegable */
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px; /* margen entre los 2 menús de la derecha de la barra horizontal */
}
#menu li .align_right {
/* Bordes redondeados */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF; /* Menu desplegable: Color sombra textos y títulos */
color: #000; /* Menu desplegable: Color textos y títulos */
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666; /* Menu desplegable: Menu 4 Color lineas superiores de las noticias */
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888; /* Menu desplegable: Menu 4 Color lineas inferiores de las noticias */
}
#menu p {
line-height:18px; /* Menu desplegable: Distancia entre lineas de las noticias */
margin:0 0 10px 0; /* Menu desplegable: Distancia entre noticias superiores e inferiores */
}
#menu li:hover div a {
font-size:12px;
color:#015b86; /* color enlaces */
}
#menu li:hover div a:hover {
color:#029feb; /* color enlace al pasar el ratón */
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Diferentes colores y posiciones de las sombras de la caja de las imágenes */
background:#FFFFFF; /* Color fondo imágenes */
padding:4px;
border:1px solid #777777; /* Color borde imágenes */
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Ubicación de las imágenes */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box { /* Modificaciones Cajitas oscuras */
background-color:#333333; /* Color de fondo de las cajitas oscuras */
color: #eeeeee; /* Color texto de las cajitas oscuras */
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* bordes redondeados */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* sombras */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb; /* Borde cuadraditos columna 3 */
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* bordes redondeados */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
</style>
En este código CSS os he dejado una serie de indicaciones en color dorado, que os servirá para editar y modificar la apariencia del menú. Desde el color de las letras, hasta el fondo. En color rosa os he indicado donde ha de colocarse el enlace de las flechitas del menú horizontal
Código HTML:
Ahora os colocaré el código HTML. Para usarlo recordad que tendréis que ir a las opciones de diseño del blog y crear un dadget HTML/Javascript y en el pegar todo el código ¿ok?
Este código se dividirá en 6 partes.La primera parte será la barra horizontal y las siguientes 5 partes serán los diferentes tipos de desplegable. También os diré donde y como colocar cada cosa en caso de que queráis el mismo desplegable 5 veces.
- Barra Horizontal:
<ul id="menu">
Aquí dentro meteremos nuestros menús desplegables
</ul>
Ahora vienen los Menús Desplegables, recordad, que si queréis utilizar uno, simplemente tenéis que añadirlo donde indica en la Barra Horizontal , uno detrás de otro y en el orden deseado
- Menú Desplegable Inicio
<li><a class="drop" href="URL Página Inicio">Inicio</a><!-- Begin Home Item -->
<div class="dropdown_2columns">
<!-- Begin 2 columns container -->
<br />
<div class="col_2">
<h2>
Bienvenido !</h2>
</div>
<div class="col_2">
Hola y bienvenidos aquí! Esto es una muestra de las posibilidades de este impresionante Mega menú desplegable.<br />
Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc.</div>
<div class="col_2">
<h2>
Navegadores Soportados</h2>
</div>
<div class="col_1">
<img alt="" height="48" src="URL Imagen Deseada" width="125" />
</div>
<div class="col_1">
Este mega menú ha sido testeado en los principales navegadores.</div>
</div>
<!-- End 2 columns container -->
</li>
<!-- End Home Item -->
En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo
En Verde tenéis el título del desplegable.
- Menú desplegable 5 Columnas
<li><a class="drop" href="URL Página 5 columnas">5 columnas</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns">
<!-- Begin 5 columns container -->
<br />
<div class="col_5">
<h2>
Este es un ejemplo de un recipiente grande con 5 columnas</h2>
</div>
<div class="col_1">
<div class="black_box">
Se trata de un cuadro de texto de color gris oscuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</div>
</div>
<div class="col_1">
Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</div>
<div class="col_1">
<div class="italic">
Esto es un ejemplo de un texto en cursiva. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</div>
</div>
<div class="col_1">
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</div>
<div class="col_1">
<div class="strong">
Esto es un ejemplo de un texto en negrita. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</div>
</div>
<div class="col_5">
<h2>
He aquí algunos contenidos con imágenes laterales</h2>
</div>
<div class="col_3">
<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Superior" width="70" />
<br />
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="URL Página Leer mas">Seguir Leyendo...</a><br />
<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Inferior" width="70" />
<br />
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="URL Página Leer mas">Seguir Leyendo...</a></div>
<div class="col_2">
<div class="black_box">
Esto es un cuadro negro, lo puedes usar para resaltar contenidos. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</div>
</div>
</div>
<!-- End 5 columns container -->
</li>
<!-- End 5 columns Item -->
- Enlace: Es al que seremos llevados si pinchamos en el título del menú
- Enlace: Es el enlace de la Imagen superior del menú
- Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo superior)
- Enlace: Es el enlace de la Imagen Inferior del menú
- Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo inferior)
En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo
En Verde tenéis el título del desplegable.
- Menú desplegable 4 Columnas
<li><a class="drop" href="URL Página 4 columnas">4 columnas</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<br />
<div class="col_4">
<h2>
Esto es un título de inicio</h2>
</div>
<div class="col_1">
<h3>
Some Links</h3>
<ul>
<li><a href="URL Página">ThemeForest</a></li>
<li><a href="URL Página">GraphicRiver</a></li>
<li><a href="URL Página">ActiveDen</a></li>
<li><a href="URL Página">VideoHive</a></li>
<li><a href="URL Página">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>
Useful Links</h3>
<ul>
<li><a href="URL Página">NetTuts</a></li>
<li><a href="URL Página">VectorTuts</a></li>
<li><a href="URL Página">PsdTuts</a></li>
<li><a href="URL Página">PhotoTuts</a></li>
<li><a href="hURL Página">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>
Other Stuff</h3>
<ul>
<li><a href="URL Página">FreelanceSwitch</a></li>
<li><a href="URL Página">Creattica</a></li>
<li><a href="URL Página">WorkAwesome</a></li>
<li><a href="URL Página">Mac Apps</a></li>
<li><a href="URL Página">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>
Misc</h3>
<ul>
<li><a href="URL Página">Design</a></li>
<li><a href="URL Página">Logo</a></li>
<li><a href="URL Página">Flash</a></li>
<li><a href="URL Página">Illustration</a></li>
<li><a href="URL Página">More...</a></li>
</ul>
</div>
</div>
<!-- End 4 columns container -->
</li>
<!-- End 4 columns Item -->
En Color Verde tenéis el título del desplegable y los títulos de las diferentes categorías. Si queréis añadir más enlaces, simplemente copiar y pegar la siguiente linea y repetirla siguiendo la lógica que se m
<li><a href="URL Página">nombre de enlace</a></li>
En Dorado os dejé el texto a modificar, nombres de enlaces, títulos de categorías.. y como siempre, el nombre del menú desplegable.
- Menú desplegable 3 Columnas
<li class="menu_right"><a class="drop" href="URL Página 3 columnas">3 columnas</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right">
<!-- Begin 3 columns container -->
<br />
<div class="col_3">
<h2>
Listado en Cajas</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="URL Página">FreelanceSwitch</a></li>
<li><a href="URL Página">Creattica</a></li>
<li><a href="URL Página">WorkAwesome</a></li>
<li><a href="URL Página">Mac Apps</a></li>
<li><a href="URL Página">Web Apps</a></li>
>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="URL Página">ThemeForest</a></li>
<li><a href="URL Página">GraphicRiver</a></li>
<li><a href="URL Página">ActiveDen</a></li>
<li><a href="URL Página">VideoHive</a></li>
<li><a href="URL Página">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="URL Página">Design</a></li>
<li><a href="URL Página">Logo</a></li>
<li><a href="URL Página">Flash</a></li>
<li><a href="URL Página">Illustration</a></li>
<li><a href="URL Página">More...</a></li>
</ul>
</div>
<div class="col_3">
<h2>
He aquí algunos ejemplos de imágenes</h2>
</div>
<div class="col_3">
<img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Superior" width="70" />
<br />
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="URL Página Leer mas#">Sigue Leyendo...</a><br />
<img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Inferior" width="70" />
<br />
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="URL Página Leer mas">Sigue Leyendo...</a></div>
</div>
<!-- End 3 columns container -->
</li>
<!-- End 3 columns Item -->
En Color Verde son los enalces de las imágenes.
En Dorado os dejé el texto a modificar
- Menú desplegable 1 Columna
<li class="menu_right"><a class="drop" href="URL Página 1 columna">1 Columna</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="URL Página">FreelanceSwitch</a></li>
<li><a href="URL Página">Creattica</a></li>
<li><a href="URL Página">WorkAwesome</a></li>
<li><a href="URL Página">Mac Apps</a></li>
<li><a href="URL Página">Web Apps</a></li>
<li><a href="URL Página">NetTuts</a></li>
<li><a href="URL Página">VectorTuts</a></li>
<li><a href="URL Página">PsdTuts</a></li>
<li><a href="URL Página">PhotoTuts</a></li>
<li><a href="URL Página">ActiveTuts</a></li>
<li><a href="URL Página">Design</a></li>
<li><a href="URL Página">Logo</a></li>
<li><a href="URL Página">Flash</a></li>
<li><a href="URL Página">Illustration</a></li>
<li><a href="URL Página">More...</a></li>
</ul>
</div>
</div>
</li>
Este es el desplegable más sencillo, tenemos en Rosa direcciones en Dorado nombres de las direcciones, creo que no hace falta explicar mucho más. Si queréis añadir más lineas.. pues copiar y pegar la siguiente y listo. Si queréis menos lineas.. todo es borrar.
<li><a href="Url Página">Nombre página</a></li>
Si tenéis alguna duda entonces intentaré ayudaros en lo posible.
