Problema con a:hover en ie6

[tonywhite]

hola, buenas noches a todos los miembros de este excelente foro, que contiene mucha ayuda pra todos, bueno antes que todo, mil disculpas sin no he posteado en el lugar correcto este tema, es que tiene que ver con un problema de un dropdown menu con superfish un plugin de la libreria jquery.
Pues nada, que parece que todo iba bien, pero al momento de correr la pagina en ie6, el background de la etiqueta a no se muestra alo ancho de todo el background de la "li" sino solo la palabra y un poco mas.

ya intente arreglarlo con un poco de javascritp en la web encontre esta solucion
en este sitio,
http://www.zoneartcss.com/webdesign/css/fix-css-loqueseahover-para-ie-6

puse en marcha la segunda opcion, y funcionó, en parte, porque ahora si se mostraba bien pero resulta, que al quitar el mouse de el ultimo item de la primera lista del submenu, (puesto que de ahi surge la siguiente sublista) el background le quedaba fijo y aunque desplazara el mouse a cualquier lado no se quitaba y si daba click en cualquier item del submenu, este también quedaba igual hasta que refrescaba la pagina.

De antemano muchas gracias a quienes puedan ayudarme.
Cualquier solucion sera bienvenida.


Bueno espero explicarme bien, pero una imagen vale mas que mil palabras, esperando asi explicarme mejor todavia:

Aqui esta la url de la imagen:

[url]http://www.uppush.com/uploads/978imagenmenus.png[/url]


o aquí está la imagen,




Este es el codigo css

Código HTML:

#main .sf-menu  li li {
 line-height:1.0;} 





#main li a,
#main li a span{
 text-decoration:none;
 font-size:15px;
 float: left;
 padding-left:20px;
 
 background-position: 0 0;
}
#main li a span{
padding-left:1px;
padding-right:20px;
background-position:right top;
cursor:pointer;
}
.sf-menu  li.current a,
.sf-menu  li.current a span{
background-image:url(images/botonnav4.png);
 }
.sf-menu li a:hover,
.sf-menu li a:hover span{
background-image:url(images/botonnav4.png);
}
.sf-menu li li a:hover{
background-image:none;}
#main{
margin-left:200px;
 float:left;
 display:inline;
 line-height:78px;
 text-transform:uppercase;  }
 
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
#main ul.main2 {
line-height:1.0;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			4.9em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu  ul a {
	
	padding: 		.75em 1em;
	text-decoration:none;
}

.sf-menu li li{
background:#ccdd55;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
#main li li a {
font-size:14px;
}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active{ outline:0}
.sf-menu li li:hover,.sf-menu li li.sfHover,.sf-menu li li a:focus,.sf-menu li li a:hover,.sf-menu li li a:active{background:#000;}

[cristian_cena]

Hola tonywhite:
Mira hasta donde se :hover no funciona en ie6.
Buscando en google encontre esta solución (basada en js), no la he probado, si anda me cuentas si?

También podrías incluir la librería jsIE7 que arregla esta cuestión.

Espero lo soluciones, saludos!

[tonywhite]

Iniciado por cristian_cena

Hola tonywhite:
Mira hasta donde se :hover no funciona en ie6.
Buscando en google encontre [URL="http://www.cristalab.com/tips/pseudoclases-de-css-en-ie-c21950l/"]esta solución [/URL](basada en js), no la he probado, si anda me cuentas si?

También podrías incluir la librería [URL="http://blog.unijimpe.net/ie5-ie6-estandar-con-ie7js/"]jsIE7[/URL] que arregla esta cuestión.

Espero lo soluciones, saludos!

Bueno,cristian-cena, muchas gracias, esta arreglado el problema, pero no totalmente, con la segunda opcion con jsIE7, pues al hacer click sobre cualquier menu item de la lista, quda el background permanente hasta recargar la pagina.

La primera opción, es la que ya habia usado, y no me habia resultado tampoco.

En cuanto lo que comentas de a la etiqueta de Hover, sí funciona unicamente con <a> por ejemplo li:hover no lo toma en cuenta pero li a:hover sí,
ahora bien, en mi caso, he puesto un valor "background" solo se aplica sobre el texto y/o los paddings pero, no sobre el ancho del backckground de toda la "li"

---------------------------------------------------------------------- ------------------------------ ----------------------------->>>>>>>


Esto que escribo es editando la respuesta, pues nada, que he dado con la solucion, solo modificando el ancho del hover, a la misma medida que el background de la lista en si, :), ahora solo queda un problemilla , y es que como el bkcground es ancho para el text ue ecribo, al pasar el mouse sobre la palabra se aciva , pero si lo paso fuera del texto no lo hace.

Es decir que tengo que pasar exactamente sobre la palabra.
¿Como hacer para que al pasar por cualquier parte de la lista del submenu se active el hover , sin necesidad de pasar exactamente por la palabra?

ya he probado con display:block y nada.

[cristian_cena]

Iniciado por tonywhite

Es decir que tengo que pasar exactamente sobre la palabra.
¿Como hacer para que al pasar por cualquier parte de la lista del submenu se active el hover , sin necesidad de pasar exactamente por la palabra?

ya he probado con display:block y nada.

Hola tonywhite:

En css todo va dentro de cajas, tu seguramente estas dando el hover al enlace, por lo que el :hover se está aplicando a la caja-css de la etiqueta <a>
ej: ul li a:hover {...}

Bien, simplemente asigna el hover para el item de la lista o para la lista entera segun tu necesidad.
ej:
ul:hover {...}
o bien
ul li:hover{...}

Saludos y gracias por postear la respuesta! un abrazo.

[Impostor]

Buenas,

otra opción para conseguir lo que deseas tonywhite, es añadirle al enlace display block y un padding. Debes tener en cuenta que ul:hover no funciona en todos los navegadores.

Saludos¡¡

[cristian_cena]

Respecto de la buena sugerencia de impostor, agregar que:

En css existen cajas de linea y cajas de bloque, <a> crea una caja de linea, por lo tanto con display:block; lo que haces es transformar esa caja de lína en una caja de bloque.

Si supongamos quieres probar al revés este comportamiento: puedes crearte un div y darle display:inline; y verás como este div que por defecto es de bloque pasa a ser una caja de línea.

Saludos

[tonywhite]

Gracias, por las respuestas, pues el ultimo problema, pues lo he resueñlto de una manera poco ortodoxa, agregué un width, que fuera igual al width de la lista, y ya quedo. Y no habia leido las respuestas, pero muchas gracias porque anotare las respuestas para tenerlas a la mano en caso cuando las necesite.

Saludos.