Foros del Web » Creando para Internet » CSS »

Menu desplegable con z-index en IE

Estas en el tema de Menu desplegable con z-index en IE en el foro de CSS en Foros del Web. Buenas, vereis tengo un problema con un menú desplegable y el z-index en IE. El menú está en el encabezado y ocupa dos lineas porque ...
  #1 (permalink)  
Antiguo 20/04/2009, 02:48
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 600
Antigüedad: 16 años, 9 meses
Puntos: 56
Menu desplegable con z-index en IE

Buenas, vereis tengo un problema con un menú desplegable y el z-index en IE.

El menú está en el encabezado y ocupa dos lineas porque es muy largo, y cuando se despliega, el menu desplegable debería situarse por encima de la segunda linea del menú pero en Internet Explorer no se ve bien. Como se que no me explico muy bien aqui os dejo una imagen



Aqui esta el codigo que uso, he usado solo CSS sin Javascript

Código:
.menuencabezado {
	width:100%;
	padding:0;
	margin:0;
	padding-bottom:20px;
	position:relative;
	z-index:200;
}
.menuencabezado ul li a, .menuencabezado ul li a:visited {
	color:#FFFFFF;
	font-family:tahoma;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	line-height:38px;
	padding:10px 15px 10px 15px;
	border:1px solid #000000;
	margin:0px -3px 0px -3px;
}
.menuencabezado ul li a:hover {
	background:#FFFFFF;
	padding:10px 15px 10px 15px;
	color:#E51AC4;
}
.menuencabezado ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
.menuencabezado li {
	display:inline;
	position:relative;
}
.menuencabezado ul li {
	background:url(img/menu.jpg);
	padding:10px 3px 10px 3px;
	*padding:0px 3px 0px 3px;
	margin:0px -3px 0px -3px;
}
.menuencabezado ul ul {
	visibility:hidden;
	position:absolute;
	top:36px;
	left:0;
	float:left;
	text-align:left;
	background:#FFFFFF;
	width:auto;
	border:1px solid #000000;
	z-index:290;
}
.menuencabezado ul ul li {
	background:url(/img/transparente.gif) no-repeat;
	position:relative;
	z-index:300;
	border:none;
}
.menuencabezado ul ul li a, .menuencabezado ul ul li a:visited {
	color:#000000;
	font-family:tahoma;
	font-size:12px;
	font-weight:bold;
	text-transform:none;
	line-height:25px;
	padding:0px 0px 0px 10px;
	margin:0px -3px 0px -1px;
	border:none;
	border-left:1px solid #000000;

}
.menuencabezado ul ul li a:hover {
	color:#E51AC4;
	padding:0px 0px 0px 10px;
}
.menuencabezado ul ul ul {
	visibility:hidden;
	position:absolute;
	float:left;
	text-align:left;
	background:#FFFFFF;
	width:auto;
	border:1px solid #000000;
	z-index:290;
	left:217px;
	top:4px;
	padding:0px 20px 0px 0px;
}

.menuencabezado ul ul ul ul {
	visibility:hidden;
}
.menuencabezado ul ul ul ul li {
	visibility:hidden;
}


.menuencabezado ul li:hover ul, .menuencabezado ul a:hover ul{visibility:visible; }
.menuencabezado ul :hover ul ul{visibility:hidden;}
.menuencabezado ul :hover ul :hover ul{ visibility:visible;}
.menuencabezado ul :hover ul :hover ul ul{ visibility:hidden;}
.menuencabezado ul :hover ul :hover ul :hover ul, .menuencabezado ul :hover ul :hover ul :hover ul li {visibility:visible;}
He leido que poniendole "position:relative;" antes del "z-index" debería funcionar en IE, pero lo he puesto y no me sale

Haber si alguien pudiera echarme una mano. Gracias por adelantado!!

Última edición por CorpseOfSteel; 20/04/2009 a las 19:15
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 11:37.