Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/05/2010, 05:02
delgaillo
 
Fecha de Ingreso: abril-2010
Mensajes: 50
Antigüedad: 14 años
Puntos: 2
Problema con menú desplegable en IE7 e IE8

Buenas, tengo un problema con un menú desplegable, parte del código es de esta página que recomendáis siempre para menús desplegables: http://www.araudi.net/ejemplos/menus_desplegables_CSS.html

El problema que tengo es que el menú despegable no aparece en IE7 e IE8 en el resto de navegadores que he probado sí que aparece y funciona correctamente.


Código:
<div id="menu"> <!-- menu desplegable -->


<ul>
  <li class="nivel1"><a href="index.html" class="nivel1">Home</a>
  
<!--[if lte IE 6]><a href="index.html" class="nivel1ie">Home<table class="falsa"><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Wines</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Wines<table class="falsa"><tr><td><![endif]-->

	<ul>
		<li><a href="#">Reds</a></li>
		<li><a href="#">Whites</a></li>
		<li><a href="#">Rose</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
Y aquí el css:
Código:
/* menu desplegable */
#menu {  
text-align: center;
padding: 0px 0px 0px 0px;
top: 10px;
font-size: 0.7em;
margin: 20px auto;

}

#menu ul { 
padding: 0;
margin: 0;
list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: 134px;

}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #CC3333;
border: solid 1px #000;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color:#DDED12;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 150px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
Que debería cambiar para que me vaya en IE7 e IE8??
Gracias de antemano.