Mostrar menú con hover en IE6

JavaProgramer · #1 (**permalink**) 06/06/2008, 01:51

Muy buenas a todos! Me llamo Ale y soy nuevo por aquí. Tengo un problemilla con una página que estoy haciendo y vengo a ver si ustedes pueden ayudarme...

La cosa es que tengo que mostrar en mi página un menú. Éste menú es una lista, y cada elemento de esta lista, a su vez, tiene una sublista (los subelementos del menú), de modo que quedaría algo como esto:

La página la tengo implementada toda con capas y el menú con la propiedad hover para que cuando pases el ratón por encima de un submenú, te despliegue sus elementos (en la captura que véis el ratón estaba sobre "GUÍAS"). El problema es que con Firefox e IE7 funciona perfectamente pero con IE6 no. Se me despliega el menú en medio de la página e incluso sin posar el ratón encima de ningún submenú, también se ve mal:

---------------------------------------

Sé que con JavaSript se puede solucionar, pero por temas de accesibilidad y tal, se nos ha pedido que NO usemos JavaScript. Creemos que tiene que haber algún modo de hacerlo con capas y hover compatible para IE6, pero no damos con él. Alguien puede ayudarme?

Desde ya muchísimas gracias.

Saludos!

Mikmoro · #2 (**permalink**) 06/06/2008, 02:19

Sí, supongo que te podremos ayudar, pero para eso es necesario ver la página y su código, ¿no te parece?. Pon un enlace para poder verla.

Mikel.

JavaProgramer · #3 (**permalink**) 06/06/2008, 03:03

Si, sorry, aquí tenéis. Éste es el código del menú:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PROYECTO OFICINA</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />


</head>
<body>

<div id="contenedor">

<div id="cuerpo">

.....<div id="menulateral">
..........<ul id="menulateral_exp">
...............<li><a href="#">OFICINA</a>
....................<ul>
.........................<li><a href="#">Bienvenida</a></li>
.........................<li><a href="#">Organización istitucional</a></li>
.........................<li><a href="#">Organismos autónomos</a></li>
.........................<li><a href="#">Normas</a></li>
.........................<li><a href="#">Tablón de anuncios</a></li>
.........................<li><a href="#">Enlaces de interés</a></li>
....................</ul>
....................<span></span>
...............</li>
...............<li><a href="#">CIUDAD</a>
....................<ul>
.........................<li><a href="#">Localización Geográfica</a></li>
.........................<li><a href="#">Historia</a></li>
.........................<li><a href="#">Patrimonio Artístico</a></li>
.........................<li><a href="#">Tradición y Fiestas Populares</a></li>
.........................<li><a href="#">Instalaciones</a></li>
.........................<li><a href="#">Galería de fotos</a></li>
.........................<li><a href="#">Galería de vídeos</a></li>
....................</ul>
....................<span></span>
...............</li>
...............<li><a href="#">GUÍAS</a>
....................<ul>
.........................<li><a href="#">Hostelería</a></li>
.........................<li><a href="#">Servicios</a></li>
.........................<li><a href="#">Industria</a></li>
.........................<li><a href="#">Agricultura</a></li>
.........................<li><a href="#">Ocio</a></li>
.........................<li><a href="#">Comercio</a></li>
.........................<li><a href="#">Organizaciones</a></li>
.........................<li><a href="#">Sanidad</a></li>
.........................<li><a href="#">Territorio</a></li>
.........................<li><a href="#">Todos</a></li> ....................</ul>
....................<span></span>
...............</li>
..........</ul>
.....</div>

.....<div id="contenido">
....
....

Y aquí tenéis un rar con los estilos: http://www.megaupload.com/es/?d=Z3CHHIZA

A ver si podéis ayudarme. Muchas gracias

JavaProgramer · #4 (**permalink**) 06/06/2008, 16:06

Nadie ? : (

Mikmoro · #5 (**permalink**) 06/06/2008, 16:34

Perdona, pero es que fui a mirar el enlace que pusiste y me llevó a un sitio desconocido para mi en el que además no ví la forma de bajar ese rar, y para colmo no uso rar.

Mikel.

FatalError · #6 (**permalink**) 08/06/2008, 03:21

Edito: entendí mal, respuesta incorrecta

hola, antes que nada saludar porque soy nuevo.

a falta de ver el código css, creo que el problema al que te refieres es que IE6 sólo acepta el "hover" sobre enlaces. para solucionar esto se puede hacer una pequeña "marranada" que he usado algunas veces pero no me gusta.

Código:

.item1	{	
	_iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));
	_iehack2: expression(this.onmouseout = new Function("this.className=_iehack;"));
}
.item1:hover, .item1.hover	{
	border: 1px solid #FF0000;
	background-color: #FFB3B3;
	cursor: default;
}

espero que te ayude

juaniquillo · #7 (**permalink**) 08/06/2008, 09:51

Yo creo haber tenido el mismo problema que tú. Si mal no recuerdo lo pude resolver dalndole un overflow:hidden al elemento que tenga la imagen de fondo, ya sea el <li> o el <a> en tu caso. Lo que no estoy seguro es si eso afecte el despliegue del otro menú en tu caso.

Mikmoro · #8 (**permalink**) 08/06/2008, 10:31

Mi opinión es que IE6, para mostrar correctamente algo que está oculto dentro de un enlace, éste necesita ganar una posición relativa o absoluta:

a:hover {position: relative;}

lo que resuelve la mayoría de los problemas (aunque a veces provoca otros que hay que resolver después).

De todas maneras, yo no he podido acceder al código css, y así se lo dije al usuario, que de momento no ha contestado.

Mikel.

JavaProgramer · #9 (**permalink**) 09/06/2008, 00:51

Buenas. Lamento no haber respondido antes pero es que no he tenido oportunidad. Es la primera vez que me siento delante del ordenador desde hace dos días. Sorry.

Mikmoro, la página a la que te diriges con el enlace que te di es una de tantas para almacenar archivos. No conoces Megaupload? Aquí en España es la más extendida junto a rapidshare. Para poder descargar algo de ahí, tienes que meter el código de tres letras que te sale en la parte de arriba, y darle a "Download". Una vez hecho eso, tendrás que esperar 45 segundos hasta que te aparezca el botón "Free download". Le das y ya tienes el archivo. Pero sólo tienes que decirme dónde quieres que te lo suba y en qué formato y en un momento lo hago. Sin problemas :)

En cuanto a las soluciones que me dais los demás, lo probaré ahora. Muchas gracias!

Mikmoro · #10 (**permalink**) 09/06/2008, 00:55

Ya bueno, lo siento: soy un poco ceporro y me gusta mucho ayudar, pero también espero que me lo pongan un poco más fácil.

¿Es muy grande la css?

Mikel.

JavaProgramer · #11 (**permalink**) 09/06/2008, 01:22

Son dos archivos en el rar:

estilos.css (793 líneas)
estilosIE6.css (99 líneas)