Share
A menudo se utilizan en el comercio electrónico o en sitios web a gran escala, los mega menús se están volviendo cada vez más populares, ya que ofrecen una solución efectiva para mostrar una gran cantidad de contenido a la vez que mantienen un diseño limpio. En este tutorial, aprenderemos cómo construir un mega menú desplegable de solo navegador impresionante, solo para CSS, con bonitas funciones de CSS3.
Si está buscando un punto de partida rápido, navegue a través de nuestras Plantillas CSS. O contratar a un experto en CSS3. De lo contrario, comencemos este tutorial..
Comencemos con un menú básico, construido con una lista desordenada y algunos estilos CSS básicos..
Ahora aplicaremos algunos estilos básicos de CSS. Para el contenedor del menú, definimos un ancho fijo que centramos estableciendo los márgenes izquierdo y derecho en "auto".
#menu estilo de lista: ninguno; ancho: 940px; margen: 30px auto 0px auto; altura: 43px; relleno: 0px 20px 0px 20px;
Ahora, veamos cómo podemos mejorarlo con algunas características de CSS3. Necesitamos usar diferentes sintaxis para los navegadores basados en Webkit (como Safari) y para los navegadores basados en Mozilla (como Firefox).
Para esquinas redondeadas, la sintaxis será:
-moz-border-radius: 10px -webkit-border-radius: 10px; radio del borde: 10px;
Para el fondo, usaremos degradados y un color alternativo para los navegadores más antiguos. Para mantener la coherencia al elegir los colores, hay una herramienta impresionante llamada Fachada que le ayuda a encontrar tonos más claros y oscuros de un color básico..
fondo: # 014464; fondo: -moz-lineal-gradiente (arriba, # 0272a7, # 013953); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 0272a7), hasta (# 013953));
La primera línea aplica un color de fondo simple (para navegadores más antiguos); la segunda y tercera líneas crean un degradado de arriba a abajo con dos colores: # 0272a7 y # 013953.
Ahora podemos agregar un borde más oscuro y pulir el diseño con un borde de inserción "falso" creado con la función "sombra de cuadro". La sintaxis es la misma para todos los navegadores compatibles: el primer valor es el desplazamiento horizontal, el segundo es el desplazamiento vertical, el tercero es el radio de desenfoque (un valor pequeño lo hace más nítido; en nuestro ejemplo, será de 1 píxel) . Configuramos todos los desplazamientos a 0 para que el valor de desenfoque cree un borde de luz uniforme:
-moz-box-shadow: inserción 0px 0px 1px # edf9ff; -webkit-box-shadow: recuadro 0px 0px 1px # edf9ff; cuadro de sombra: inserción 0px 0px 1px # edf9ff;
Aquí está el código CSS final para el contenedor #menu:
#menu estilo de lista: ninguno; ancho: 940px; margen: 30px auto 0px auto; altura: 43px; relleno: 0px 20px 0px 20px; / * Esquinas redondeadas * / -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * Color de fondo y degradados * / fondo: # 014464; fondo: -moz-lineal-gradiente (arriba, # 0272a7, # 013953); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 0272a7), hasta (# 013953)); / * Bordes * / borde: 1px sólido # 002232; -moz-box-shadow: inserción 0px 0px 1px # edf9ff; -webkit-box-shadow: recuadro 0px 0px 1px # edf9ff; cuadro de sombra: inserción 0px 0px 1px # edf9ff;
Comenzaremos con todos los elementos del menú alineados a la izquierda y los espaciaremos con un margen derecho (el relleno será necesario para el estado de desplazamiento):
#menu li float: left; bloqueo de pantalla; text-align: center; posición: relativa; relleno: 4px 10px 4px 10px; margen derecho: 30px; margen superior: 7px; frontera: ninguna;
Para el estado de desplazamiento y el menú desplegable, he elegido un esquema de color gris para el fondo.
El color alternativo será gris claro (# F4F4F4) y el degradado se aplicará desde la parte superior (# F4F4F4) a la parte inferior (#EEEEEE). Las esquinas redondeadas se aplicarán solo en las esquinas superiores, ya que tendremos el menú desplegable pegado justo debajo de los elementos del menú.
fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, # F4F4F4, #EEEEEE); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# F4F4F4), a (#EEEEEE));
El relleno izquierdo y derecho es un poco más pequeño aquí porque tenemos un borde de 1 píxel que aparece en el hover. Si mantenemos el mismo relleno, los elementos del menú serán empujados dos píxeles a la derecha debido a los bordes izquierdo y derecho agregados al pasar el mouse. Para evitar eso, eliminaremos 1 píxel de relleno en ambos lados, por lo que tenemos 9 píxeles en lugar de 10.
borde: 1px sólido # 777777; relleno: 4px 9px 4px 9px;
Luego, agregamos esquinas redondeadas a la parte superior solo para que el menú desplegable se pegue perfectamente debajo del elemento del menú principal:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; radio del borde: 5px 5px 0px 0px;
Aquí está el CSS final para los elementos del menú en el hover:
#menu li: hover border: 1px solid # 777777; relleno: 4px 9px 4px 9px; / * Color de fondo y degradados * / fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, # F4F4F4, #EEEEEE); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# F4F4F4), a (#EEEEEE)); / * Esquinas redondeadas * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; radio del borde: 5px 5px 0px 0px;
Para los enlaces, aplicaremos una sombra de texto agradable con una sintaxis simple: los valores primero y segundo son desplazamientos horizontales y verticales para la sombra (1 píxel en nuestro ejemplo), el tercero es el desenfoque (1 píxel también) y entonces tenemos el color (negro):
text-shadow: 1px 1px 1px # 000;
Aquí está el CSS final para los enlaces:
#menu li a font-family: Arial, Helvetica, sans-serif; tamaño de fuente: 14px; color: #EEEEEE; bloqueo de pantalla; esquema: 0; texto-decoración: ninguno; text-shadow: 1px 1px 1px # 000;
En la posición del mouse, ya que el fondo es gris, usaremos un color más oscuro (# 161616) para los enlaces y el color blanco para la sombra del texto:
#menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF;
Finalmente, necesitamos una forma de indicar si hay un menú desplegable o no utilizando una imagen de flecha simple como fondo, se colocará a la derecha utilizando el relleno y el margen superior se alineará correctamente. Al pasar el mouse, este margen superior se establecerá en 7 píxeles en lugar de 8, ya que tenemos un borde adicional que aparece en el mouse del mouse (de lo contrario, la flecha se movería 1 píxel hacia abajo en el mouse):
Accentsconagua
#menu li .drop padding-right: 21px; fondo: url ("img / drop.png") no-repetir a la derecha 8px; #menu li: hover .drop background: url ("img / drop.png") no repetir a la derecha 7px; Aquí está nuestro código final para el contenedor de menú y enlaces; solo el elemento "home" no tiene ningún contenido desplegable por ahora:
#menu estilo de lista: ninguno; ancho: 940px; margen: 30px auto 0px auto; altura: 43px; relleno: 0px 20px 0px 20px; / * Esquinas redondeadas * / -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * Color de fondo y degradados * / fondo: # 014464; fondo: -moz-lineal-gradiente (arriba, # 0272a7, # 013953); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 0272a7), hasta (# 013953)); / * Bordes * / borde: 1px sólido # 002232; -moz-box-shadow: inserción 0px 0px 1px # edf9ff; -webkit-box-shadow: recuadro 0px 0px 1px # edf9ff; cuadro de sombra: inserción 0px 0px 1px # edf9ff; #menu li float: left; bloqueo de pantalla; text-align: center; posición: relativa; relleno: 4px 10px 4px 10px; margen derecho: 30px; margen superior: 7px; frontera: ninguna; #menu li: hover border: 1px solid # 777777; relleno: 4px 9px 4px 9px; / * Color de fondo y degradados * / fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, # F4F4F4, #EEEEEE); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# F4F4F4), a (#EEEEEE)); / * Esquinas redondeadas * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; radio del borde: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; tamaño de fuente: 14px; color: #EEEEEE; bloqueo de pantalla; esquema: 0; texto-decoración: ninguno; text-shadow: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; fondo: url ("img / drop.png") no-repetir a la derecha 8px; #menu li: hover .drop background: url ("img / drop.png") no repetir a la derecha 7px; Y el resultado es:
Un menú desplegable "clásico" generalmente contiene listas anidadas dentro de los elementos de la lista principal y se ve así:
Para nuestro Mega Menú, en lugar de listas anidadas, simplemente usaremos DIV estándar, que funcionarán como cualquier lista anidada:
Esta será la estructura básica para el desplegable. La idea detrás de esto es poder incluir cualquier tipo de contenido, como párrafos, imágenes, listas personalizadas o un formulario de contacto, organizado en columnas..
Los contenedores con diferentes tamaños mantendrán todo el contenido desplegable. He elegido los nombres de las etiquetas según el número de columnas que contendrán.
Para ocultar los menús desplegables, usaremos posicionamiento absoluto con un margen izquierdo negativo:
posición: absoluta; izquierda: -999em;
El color de respaldo del fondo es el mismo que el utilizado para los elementos del menú. Los navegadores modernos mostrarán un gradiente comenzando con #EEEEEE en la parte superior (para que coincida con el gradiente del elemento del menú principal) y terminando con #BBBBBB en la parte inferior:
fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, #EEEEEE, #BBBBBB); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (#EEEEEE), hasta (#BBBBBB));
Volveremos a utilizar esquinas redondeadas, excepto la superior izquierda:
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; radio del borde: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; posición: absoluta; izquierda: -999em; / * Oculta el menú desplegable * / text-align: left; relleno: 10px 5px 10px 5px; borde: 1px sólido # 777777; borde superior: ninguno; / * Fondo degradado * / fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, #EEEEEE, #BBBBBB); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (#EEEEEE), hasta (#BBBBBB)); / * Esquinas redondeadas * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; radio del borde: 0px 5px 5px 5px;
Para ilustrar esto, veamos cómo se vería si no hubiéramos prestado atención a los detalles:
Ahora aquí está nuestro ejemplo:
Como puede ver, el menú desplegable se ajusta perfectamente a su elemento del menú principal.
Para tener un contenedor desplegable perfecto, necesitamos especificar el ancho de cada uno:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
Y para mostrar los menús desplegables en el mouse del mouse, simplemente usaremos:
#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;
Nuestras clases están listas para ser incluidas en nuestro menú. Usaremos cada uno de ellos comenzando desde la columna de 5 columnas, hasta el desplegable de una sola columna:
5 columnas de contenido
4 columnas de contenido
3 columnas de contenido
2 columnas de contenido
1 contenido de la columna
Aquí hay una vista previa del código anterior:
Ahora que tenemos los contenedores listos, crearemos columnas de tamaños crecientes, siguiendo los principios del sistema de cuadrícula 960.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flotador izquierdo; posición: relativa; margen izquierdo: 5px; margen derecho: 5px; .col_1 ancho: 130px; .col_2 ancho: 270px; .col_3 ancho: 410px; .col_4 ancho: 550px; .col_5 ancho: 690px;
Aquí hay un ejemplo de un menú desplegable que contiene varias columnas. En este ejemplo, tenemos diferentes combinaciones que utilizan todo tipo de columnas:
Este es un contenido de 5 columnas.
Este es un contenido de 1 columna.
Este es un contenido de 1 columna.
Este es un contenido de 1 columna.
Este es un contenido de 1 columna.
Este es un contenido de 1 columna.
Este es un contenido de 4 columnas.
Este es un contenido de 1 columna.
Este es un contenido de 3 columnas.
Este es un contenido de 2 columnas.
Vista previa del código:
Ahora, veamos cómo podemos alinear nuestro menú y el contenido desplegable en el borde derecho de la barra de navegación; no solo el elemento de menú, sino que también se debe cambiar el contenedor desplegable.
Para lograr esto, agregaremos una nueva clase llamada .menu_right al elemento de la lista principal, así que restablecemos el margen derecho y lo flotamos a la derecha:
#menu .menu_right float: right; margen derecho: 0px;
A continuación, veamos el desplegable. En el código CSS anterior, las esquinas redondeadas se aplicaron a todas las esquinas, excepto la superior izquierda, para que coincidan con el fondo del elemento del menú principal. Ahora queremos que este menú desplegable se pegue al borde derecho del elemento del menú principal. Por lo tanto, sobrescribiremos los valores de radio de borde con una nueva clase llamada .align_right y estableceremos la esquina superior derecha en 0.
#menu li .align_right / * Esquinas redondeadas * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; radio del borde: 5px 0px 5px 5px;
Por último, pero no menos importante, queremos que el menú desplegable aparezca a la derecha; así que usaremos nuestra nueva clase y restableceremos el valor de la izquierda, luego lo haremos a la derecha:
#menu li: hover .align_right left: auto; derecha: -1px; arriba: auto;
Ahora está listo para ser utilizado en el menú:
Este es un contenido de 1 columna.
Y una pequeña vista previa del código anterior:
Ahora que tenemos toda la estructura lista, podemos agregar todo el contenido que queramos: texto, listas, imágenes, etc..
Comencemos con algunos estilos básicos para párrafos y encabezados:
#menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; línea de altura: 21px; tamaño de fuente: 12px; alineación de texto: izquierda; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; peso de la fuente: 400; espacio entre letras: -1px; margen: 7px 0 14px 0; parte inferior de relleno: 14px; borde inferior: 1px sólido # 666666; #menu h3 font-size: 14px; margen: 7px 0 14px 0; parte inferior de relleno: 7px; borde inferior: 1px sólido # 888888; #menu p line-height: 18px; margen: 0 0 10px 0; .strong font-weight: negrita; .italic font-style: italic;
Podemos aplicar un bonito color azul a los enlaces dentro del menú desplegable:
#menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb;
Vamos a renovar nuestras listas; tenemos que restablecer algunos estilos como el color de fondo o los bordes que se utilizan en la barra de navegación:
#menu li ul estilo de lista: ninguno; relleno: 0; margen: 0 0 12px 0; #menu li ul li font-size: 12px; altura de línea: 24px; posición: relativa; text-shadow: 1px 1px 1px #ffffff; relleno: 0; margen: 0; flotar: ninguno; alineación de texto: izquierda; ancho: 130px; #menu li ul li: hover background: none; frontera: ninguna; relleno: 0; margen: 0;
.imgshadow background: #FFFFFF; relleno: 4px; borde: 1px sólido # 777777; margen superior: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; cuadro de sombra: 0px 0px 5px # 666666;
Y para crear un párrafo con una imagen a la izquierda:
.img_left ancho: auto; flotador izquierdo; margen: 5px 15px 5px 5px;
Para resaltar algo de contenido, aquí hay un ejemplo de un cuadro oscuro con esquinas redondeadas y una sombra de inserción sutil:
#menu li .black_box background-color: # 333333; color: #eeeeee; text-shadow: 1px 1px 1px # 000; relleno: 4px 6px 4px 6px; / * Esquinas redondeadas * / -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; / * Shadow * / -webkit-box-shadow: inset 0 0 3px # 000000; -moz-box-shadow: recuadro 0 0 3px # 000000; caja-sombra: recuadro 0 0 3px # 000000;
Y para terminar, aquí hay otra forma de diseñar sus listas usando, nuevamente, algo de CSS3:
#menu li .greybox li background: # F4F4F4; borde: 1px sólido #bbbbbb; margen: 0px 0px 4px 0px; relleno: 4px 6px 4px 6px; ancho: 116px; / * Esquinas redondeadas * / -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; #menu li .greybox li: hover background: #ffffff; borde: 1px sólido #aaaaaa; relleno: 4px 6px 4px 6px; margen: 0px 0px 4px 0px;
Todos los navegadores manejan el desplazamiento sobre etiquetas que no son de anclaje ... excepto Internet Explorer 6; así que nuestro Mega Menú aún no funciona con este viejo navegador. Podemos solucionar este problema gracias a un archivo de comportamiento que agregará esta funcionalidad. Puede encontrarlo aquí y usar comentarios condicionales para apuntar solo a IE6; Más explicaciones se pueden encontrar a través de este artículo de CSS-Tricks.
Para apuntar a IE6, usaremos el siguiente código:
He usado algunos archivos PNG en este tutorial y, como todos sabemos, IE6 no admite la transparencia, por lo que tenemos diferentes soluciones:
Te dejaré elegir el que se ajuste a tus necesidades. Ahora, revisemos un ejemplo completo de trabajo..
Mega Menú desplegable
Hola y bienvenido ! Este es un escaparate de las posibilidades de este increíble Mega Menú desplegable.
Este artículo viene con una amplia gama de estilos tipográficos preparados como encabezados, listas, etc..
Este mega menú ha sido probado en todos los principales navegadores.
Este es un texto de cuadro gris oscuro. Fusce en metus en 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.
Esta es una muestra de un texto en cursiva. Consequat scelerisque. Fusce sed lectus en arcu mollis accumsan en nec nisi porta quis sit amet.
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, sempre in ultricies vitae, vulputate porttitor neque.
Esta es una muestra de un texto en negrita. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed en sem mauris. Aenean a commodo mi. Praesent augue lacus.Leer más ...
Aliquam elementum felis quis felis consecuencia scelerisque. Fusce sed lectus en arcu mollis accumsan en nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.Leer más ...
Esta es una caja negra, puede usarla para resaltar un contenido. 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, condimentum ligula est vel orci. Donec interdum lacus en velit varius gravida. Nulla ipsum risus.
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.Leer más ...
Aliquam elementum felis quis felis consecuencia scelerisque. Fusce sed lectus en arcu mollis accumsan en nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Lee mas…
body, ul, li font-size: 14px; Familia tipográfica: Arial, Helvetica, sans-serif; línea de altura: 21px; alineación de texto: izquierda; / * Barra de navegación * / #menu estilo de lista: ninguno; ancho: 940px; margen: 30px auto 0px auto; altura: 43px; relleno: 0px 20px 0px 20px; / * Esquinas redondeadas * / -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * Color de fondo y degradados * / fondo: # 014464; fondo: -moz-lineal-gradiente (arriba, # 0272a7, # 013953); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 0272a7), hasta (# 013953)); / * Bordes * / borde: 1px sólido # 002232; -moz-box-shadow: inserción 0px 0px 1px # edf9ff; -webkit-box-shadow: recuadro 0px 0px 1px # edf9ff; cuadro de sombra: inserción 0px 0px 1px # edf9ff; #menu li float: left; text-align: center; posición: relativa; relleno: 4px 10px 4px 10px; margen derecho: 30px; margen superior: 7px; frontera: ninguna; #menu li: hover border: 1px solid # 777777; relleno: 4px 9px 4px 9px; / * Color de fondo y degradados * / fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, # F4F4F4, #EEEEEE); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# F4F4F4), a (#EEEEEE)); / * Esquinas redondeadas * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; radio del borde: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; tamaño de fuente: 14px; color: #EEEEEE; bloqueo de pantalla; esquema: 0; texto-decoración: ninguno; text-shadow: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; fondo: url ("img / drop.png") no-repetir a la derecha 8px; #menu li: hover .drop background: url ("img / drop.png") no repetir a la derecha 7px; / * Dropdown * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; flotador izquierdo; posición: absoluta; izquierda: -999em; / * Oculta el menú desplegable * / text-align: left; relleno: 10px 5px 10px 5px; borde: 1px sólido # 777777; borde superior: ninguno; / * Fondo degradado * / fondo: # F4F4F4; fondo: -moz-linear-gradient (arriba, #EEEEEE, #BBBBBB); fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (#EEEEEE), hasta (#BBBBBB)); / * Esquinas redondeadas * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; radio del borde: 0px 5px 5px 5px; .dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .downdown_5columns width: 700px; #menu li: hover. menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; arriba: auto; / * Columnas * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; flotador izquierdo; posición: relativa; margen izquierdo: 5px; margen derecho: 5px; .col_1 ancho: 130px; .col_2 ancho: 270px; .col_3 ancho: 410px; .col_4 ancho: 550px; .col_5 ancho: 690px; / * Alineación derecha * / #menu. menu_right float: right; margen derecho: 0px; #menu li .align_right / * Esquinas redondeadas * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; radio del borde: 5px 0px 5px 5px; #menu li: hover .align_right left: auto; derecha: -1px; arriba: auto; / * Diseños de contenido desplegables * / #menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; línea de altura: 21px; tamaño de fuente: 12px; alineación de texto: izquierda; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; peso de la fuente: 400; espacio entre letras: -1px; margen: 7px 0 14px 0; parte inferior de relleno: 14px; borde inferior: 1px sólido # 666666; #menu h3 font-size: 14px; margen: 7px 0 14px 0; parte inferior de relleno: 7px; borde inferior: 1px sólido # 888888; #menu p line-height: 18px; margen: 0 0 10px 0; #menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb; .strong font-weight: negrita; .italic font-style: italic; .imgshadow background: #FFFFFF; relleno: 4px; borde: 1px sólido # 777777; margen superior: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; cuadro de sombra: 0px 0px 5px # 666666; .img_left / * La imagen se pega a la izquierda * / width: auto; flotador izquierdo; margen: 5px 15px 5px 5px; #menu li .black_box background-color: # 333333; color: #eeeeee; text-shadow: 1px 1px 1px # 000; relleno: 4px 6px 4px 6px; / * Esquinas redondeadas * / -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; / * Shadow * / -webkit-box-shadow: inset 0 0 3px # 000000; -moz-box-shadow: recuadro 0 0 3px # 000000; caja-sombra: recuadro 0 0 3px # 000000; #menu li ul estilo de lista: ninguno; relleno: 0; margen: 0 0 12px 0; #menu li ul li font-size: 12px; altura de línea: 24px; posición: relativa; text-shadow: 1px 1px 1px #ffffff; relleno: 0; margen: 0; flotar: ninguno; alineación de texto: izquierda; ancho: 130px; #menu li ul li: hover background: none; frontera: ninguna; relleno: 0; margen: 0; #menu li .greybox li background: # F4F4F4; borde: 1px sólido #bbbbbb; margen: 0px 0px 4px 0px; relleno: 4px 6px 4px 6px; ancho: 116px; / * Esquinas redondeadas * / -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; #menu li .greybox li: hover background: #ffffff; borde: 1px sólido #aaaaaa; relleno: 4px 6px 4px 6px; margen: 0px 0px 4px 0px; 