| Spry problemas menú horizontal en IE7
Robert Nitko - 11/07/2009 |
Hola. Al igual que muchos antes que yo estoy teniendo un heck de un tiempo con la solución de este problema barra de menú. He leído y leer y leer posts anteriores. Tratado tratado y tratado de soluciones de la gente en vano. Que aquí me trae.
Tengo 6 categorías principales en mi barra de menú principal. En algunos de ellos tengo un sub menú desplegable de. En otros, nada. Algunos navegadores muestran las 6 categorías, mientras que se mueve es decir, en particULar, mi artícULo 6 bajo mi primer punto. "locos!", En palabras de Luis Rey, en Libro de la Selva. Qué fastidio.
Tan seguro de que leo bastante y trató a todos los grandes cosas de Richard Williams, ha estado ayudando a la gente durante tanto tiempo. Dios lo bendiga. Estoy seguro de que está enfermo de la misma cuestión. Pero parece ser el experto residente, Gurú y salvador. Mi sombrero ante usted. Le da man.
Así que estoy convoca una vez más por mi desafío. Una advertencia. Iré añadiendo uno más categoría a la barra de menú para que sea finalmente 7, pero duda de que tendrá algún impacto en la solución de.
Aquí está mi código de la sprymenubarhorizontal.CSS
@ charset "utf-8";
/ * Sprymenubarhorizontal.CSS - version 0.6 - Spry pre-release 1.6.1 * /
/ * Copyright (c) 2006. Adobe los sistemas incorporados. Todos los derechos reservados. * /
/************************************************* ******************************
Información de diseño de: Describe modelo de caja, Posicionamiento, Orden-z
************************************************** ***************************** /
/ * El recipiente exterior de la barra de menú, De una caja automática de ancho sin margen o material de relleno * /
UL.Menubarhorizontal
{
Margen: 0;
Padding: 0;
List-style-type: Ninguno;
Font-size: 100%;
Cursor: Por defecto;
Anchura: Automático;
}
/ * Establecer la barra de menú activo con esta clase de, Actualmente ajuste Z-index para dar cabida a errores de representación es decir,: http:/ / therealcrisp.XS4ALL.Nl / Meuk / es-zindexbug.html * /
UL.Menubaractive
{
Z-index: 1000;
}
/ Contenedores elemento de menú *, Los niños posición con respecto a este contenedor y un ancho fijo * /
UL.Li menubarhorizontal
{
Margen: 0;
Padding: 0;
List-style-type: Ninguno;
Font-size: 100%;
Posición: Relativa;
Text-align: Izquierda;
Cursor: Pointer;
Anchura: 8em;
Flotador: Izquierda;
}
Submenús * / deben aparecer debajo de su padre (arriba: 0) con un mayor Z-index, Pero son inicialmente hacia el lado izquierdo de la pantalla (-1000em) * /
UL.Ul menubarhorizontal
{
Margen: 0;
Padding: 0;
List-style-type: Ninguno;
Font-size: 100%;
Z-index: 1020;
Cursor: Por defecto;
Anchura: 8.2em;
Posición: Absoluta;
Izquierdo: -1000em;
}
/ * Submenú que se muestra con la designación de la clase menubarsubmenuvisible, Nos pusimos a la izquierda en auto para que lo que se refiere a la pantalla por debajo de su elemento primario del menú * /
UL.Ul menubarhorizontal.Menubarsubmenuvisible
{
Izquierdo: Automático;
}
/ * Elemento de menú de los contenedores son los mismos de ancho fijo como padre * /
UL.Menubarhorizontal UL li
{
Anchura: 8.2em;
}
/ * Submenús debería aparecer un ligero solapamiento a la derecha (95%) y hasta (-5%) * /
UL.Ul menubarhorizontal
{
Posición: Absoluta;
Margen: -5% 0 0 95%;
}
/ * Submenú que se muestra con la designación de la clase menubarsubmenuvisible, Nos pusimos a 0 a la izquierda por lo que viene en la pantalla * /
UL.Ul menubarhorizontal.Ul menubarsubmenuvisible.Menubarsubmenuvisible
{
Izquierdo: Automático;
Superior: 0;
}
/************************************************* ******************************
La información de diseño: Describe el esquema de Color, Fronteras, Fuentes de la
************************************************** ***************************** /
/ * Contenedores submenú tienen fronteras en todos los lados * /
UL.Ul menubarhorizontal
{
Frontera: 1px solid # ccc;
}
/ * Opciones del menú son un bloque de Color gris claro con el relleno y ningún tipo de decoración de texto * /
UL.Menubarhorizontal un
{
Exponer: Bloque;
Cursor: Pointer;
Background-Color: # eee;
Padding: 0.5em 0.75em;
Color: # 333;
Text-decoration: Ninguno;
}
/ Menu items * que han ratón sobre o enfoque tiene un fondo azUL y texto en blanco * /
UL.Menubarhorizontal un:Hover, UL.Menubarhorizontal un:Enfoque
{
Background-Color: # 33C;
Color: # fff;
}
/ * Opciones del menú que se abre con submenús se establecen en menubaritemHover con un fondo azUL y texto en blanco * /
UL.Menubarhorizontal un.MenubaritemHover, UL.Menubarhorizontal un.MenubaritemsubmenuHover, UL.Menubarhorizontal un.Menubarsubmenuvisible
{
Background-Color: # 33C;
Color: # fff;
}
/************************************************* ******************************
Indicación submenú: Estilos de si hay un submenú en virtud de un determinado elemento de menú
************************************************** ***************************** /
/ * Opciones del menú tiene un submenú que tienen la menubaritemsubmenu designación de la clase y están configurados para utilizar una imagen de fondo situado en el extremo izquierdo (95%) y centrados verticalmente (50%) * /
UL.Menubarhorizontal un.Menubaritemsubmenu
{
Background-image: URL (sprymenubardown.Gif);
Background-repeat: No-repeat;
Background-Posición: 95% 50%;
}
/ * Opciones del menú tiene un submenú que tienen la menubaritemsubmenu designación de la clase y están configurados para utilizar una imagen de fondo situado en el extremo izquierdo (95%) y centrados verticalmente (50%) * /
UL.Menubarhorizontal UL un.Menubaritemsubmenu
{
Background-image: URL (sprymenubarright.Gif);
Background-repeat: No-repeat;
Background-Posición: 95% 50%;
}
/ * Opciones del menú que se abre con submenús tienen menubaritemsubmenuHover designación de la clase y se establece para utilizar un "Hover" imagen de fondo situado en el extremo izquierdo (95%) y centrados verticalmente (50%) * /
UL.Menubarhorizontal un.MenubaritemsubmenuHover
{
Background-image: URL (sprymenubardownHover.Gif);
Background-repeat: No-repeat;
Background-Posición: 95% 50%;
}
/ * Opciones del menú que se abre con submenús tienen menubaritemsubmenuHover designación de la clase y se establece para utilizar un "Hover" imagen de fondo situado en el extremo izquierdo (95%) y centrados verticalmente (50%) * /
UL.Menubarhorizontal UL un.MenubaritemsubmenuHover
{
Background-image: URL (sprymenubarrightHover.Gif);
Background-repeat: No-repeat;
Background-Posición: 95% 50%;
}
/************************************************* ******************************
Hacks navegador: Los mercenarios a continuación no debe ser modificada a menos que usted sea un experto
************************************************** ***************************** /
/ * Hack para ie: Para asegurarse de que los submenús muestran por encima de los controles de formULario, Que subyacen en cada submenú con un iframe * /
UL.Iframe menubarhorizontal
{
Posición: Absoluta;
Z-index: 1010;
Filtro:(alfa de opacidad:0.1);
}
/ * Hack para ie: Para estabilizar la apariencia de los elementos de menú, la barra de flotación es mantener es decir, 5.0 de analizar * /
@ pantalla de los medios de comunicación, Proyección
{
UL.Li menubarhorizontal.Menubaritemie
{
Exponer: Inline;
F \ loat: Izquierda;
Fondo: # fff;
}
}
Gracias de antemano.
bob | |
