Foros del Web » Creando para Internet » CSS »

Menu de Listas en IE6

Estas en el tema de Menu de Listas en IE6 en el foro de CSS en Foros del Web. Hola, he hecho un menu basado en listas y CSS que funciona correctamente en la mayoría de navegadores pero (sorpresa) no me acaba de funcionar ...
  #1 (permalink)  
Antiguo 04/06/2009, 02:46
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 9 años, 2 meses
Puntos: 0
Exclamación Menu de Listas en IE6

Hola, he hecho un menu basado en listas y CSS que funciona correctamente en la mayoría de navegadores pero (sorpresa) no me acaba de funcionar correctamente en IE6...

El menu consta de 5 categorías, y una de ellas (la primera) contiene a su vez tres submenús, que sólo deben aparecer cuando se pasa por encima de ella.

El problema está en que en IE6 no logro hacer aparecer los submenús asociados a la primera categoría...

A ver si alguien puede echarme una mano! ;)

Código XHTML:

Código HTML:
<ul id="navbar" style=" position:absolute;">

		  <li><a href="#" id="b1"></a>
				<ul>
					<li><a href="concerts.html" id="b1_1"></a></li>
					<li><a href="abonaments.html" id="b1_2"></a></li>
					<li><a href="entrades.html" id="b1_3"></a></li>
				</ul>
			</li>

			<li><a href="cicle_orgue.html" id="b2"></a></li>
			<li><a href="musica_i_musics.html" id="b3"></a></li>
			<li><a href="discant.html" id="b4"></a></li>
            <li><a href="interprets.html" id="b5"></a></li>
	</ul> 

Código CSS

Código:
#navbar {
	position: relative;
	width: 663px;
	z-index:999;
	top:120px;
	left:-20px;	
}
	
#navbar li {
	list-style: none;
	float: left;
}
	
#navbar li a {
	display: block;
	text-transform: uppercase;
	text-decoration: none; 
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:12px;
	color: #FFFFFF; 
}
	
#navbar li a:hover {
	
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:12px;
	color: #000000; 
}
	
#navbar li ul {
	display: none; 
}
	
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top:1px;
}
	
#navbar li:hover li, #navbar li.hover li {
	float: left;
	margin-top:0px;
}
	
#navbar li:hover li a, #navbar li.hover li a {
	font-family:Verdana, Geneva, sans-serif, Arial, Helvetica;
	font-size:10px;
	color: #FFFFFF; 
}
	
#navbar li li a:hover {
	color: #000000;
}

#b1{
	background:url(../img/b1_0.gif);
	width:175px;
	height:26px;
	background-repeat:no-repeat;
}
#b1:hover{
	background:url(../img/b1_1.gif);
	width:175px;
	height:26px;
	background-repeat:no-repeat;
}
#b2{
	background:url(../img/b2_0.gif);
	width:113px;
	height:26px;
	background-repeat:no-repeat;
}
#b2:hover{
	background:url(../img/b2_1.gif);
	width:113px;
	height:26px;
	background-repeat:no-repeat;
}
#b3{
	background:url(../img/b3_0.gif);
	width:121px;
	height:26px;
	background-repeat:no-repeat;
}
#b3:hover{
	background:url(../img/b3_1.gif);
	width:121px;
	height:26px;
	background-repeat:no-repeat;
}
#b4{
	background:url(../img/b4_0.gif);
	width:77px;
	height:44px;
	background-repeat:no-repeat;
	margin-top:-18px;
}
#b4:hover{
	background:url(../img/b4_1.gif);
	width:77px;
	height:44px;
	margin-top:-18px;
	background-repeat:no-repeat;
}
#b5{
	background:url(../img/b5_0.gif);
	width:143px;
	height:26px;
	background-repeat:no-repeat;
	margin-left:-4px;
}
#b5:hover{
	background:url(../img/b5_1.gif);
	width:143px;
	height:26px;
	background-repeat:no-repeat;
	margin-left:-4px;
}

#b1_1{
	background:url(../img/b_1_1_0.gif);
	width:72px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#b1_1:hover{
	background:url(../img/b_1_1_1.gif);
	width:72px;
	height:15px;
	background-repeat:no-repeat;
	margin-top:-1px;
	margin-left:0px;
}

#b1_2{
	background:url(../img/b1_2_0.gif);
	width:89px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#b1_2:hover{
	background:url(../img/b1_2_1.gif);
	width:89px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}

#b1_3{
	background:url(../img/b_1_3_0.gif);
	width:68px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}
#b1_3:hover{
	background:url(../img/b_1_3_1.gif);
	width:68px;
	height:15px;
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:-1px;
}

PD: se que el código esta un poco "sucio", pero es que he echo tantas pruebas para intentar solucionar el problema que ya no sé ni que hago... jeje

Muchas gracias!
  #2 (permalink)  
Antiguo 04/06/2009, 02:49
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Menu de Listas en IE6

el problema que veo yo es que le aplicas el hover encima del li, cuando se lo tendrías que aplicar encima de a, ya que IE6 soloa cepta dichas propiedades encima de las etiquetas a y las demás las ignora
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 04/06/2009, 02:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu de Listas en IE6

Aquí tienes unos cuantos menús sólo con CSS que funcinan en IE6. Mira a ver si te sirven para ver cómo está hecho para que funcione.
  #4 (permalink)  
Antiguo 04/06/2009, 08:32
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 9 años, 2 meses
Puntos: 0
Sonrisa Respuesta: Menu de Listas en IE6

Gracias por vuestras respuestas...

hades87, estoy intentando cambiar el CSS para hacer referencia al :hover del link y no del <li> pero parece que no lo consigo...

El código que se ocupa del :hover és:

Código HTML:
#navbar li ul {
	display: none; 
}
	
#navbar li:hover ul{
	position: absolute;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top:1px;
}
y la estructura del HTML és:

Código:
<ul id="navbar" style=" position:absolute; z-index:999;">

		  <li><a href="#" id="b1"></a>
				<ul>
					<li><a href="concerts.html" id="b1_1"></a></li>
					<li><a href="abonaments.html" id="b1_2"></a></li>
					<li><a href="entrades.html" id="b1_3"></a></li>
				</ul>
			</li>

			<li><a href="cicle_orgue.html" id="b2"></a></li>
			<li><a href="musica_i_musics.html" id="b3"></a></li>
			<li><a href="discant.html" id="b4"></a></li>
            <li><a href="interprets.html" id="b5"></a></li>
	</ul>
Supongo que haciendo referencia al #b1 en vez del <li> (solo #b1 tiene desplegable) deberia funcionar no?

Lo intento con
Código:
#navbar li a#b1:hover ul{...}
, pero no parece funcionar...

Alguien puede ayudarme?

Muchisimas gracias!!
  #5 (permalink)  
Antiguo 04/06/2009, 16:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Menu de Listas en IE6

el hover los has de aplicar a a, tal que quede así:

a:hover, solamente con a te lo aceptará IE6, de cualquier otra forma no
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 04/06/2009, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu de Listas en IE6

No podría funcionar con esto:
Cita:
#navbar li a#b1:hover ul{...}
porque sencillamente el UL no está dentro del enlace, sino fuera de él.
Cita:
<a href="#" id="b1"></a>
<ul>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:53.