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:
He leido que poniendole "position:relative;" antes del "z-index" debería funcionar en IE, pero lo he puesto y no me sale .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;}
Haber si alguien pudiera echarme una mano. Gracias por adelantado!!