CSS menu acordeon vertical no funciona en IE8 Hola a todos, soy nuevo en esto de hacer menus con css, asi que me baje un script y comence a modificarlo para entender como funcionaba, actualmente funciona correctamente en google chrome, safari y fire fox, pero no en ie 8 o 7.
El menu es un acordeon vertical, ya aplique algunas cosas para que funcionara el degradado, pero en ie simplente no queda, y aparece todo expandido.
Les dejo el fuente para ver quien me puede echar una mano, se los agradeceria mucho:
</div>
<div id="wrap">
<br>
<ul class="menu">
<li class="title"><a id="1" href="../pages/homepage/inicio.php" target= "mainFrame"><span>INICIO</span></a>
</li>
<li class="title"><a id="2" href="#2"><span>Consultas</span></a>
<ul>
<li><a href="../pages/consultas/01_tbps_horas.php" target= "mainFrame">por Hora</a></li>
<li><a href="#">por Días</a></li>
<li><a href="#">por Mes</a></li>
<li><a href="#">por Año</a></li>
<li><a href="#">Histórico</a></li>
</ul>
</li>
<li class="title"><a id="3" href="#3"><span>Comparativos</span></a>
<ul>
<li><a href="#">por Horas</a></li>
<li><a href="#">por Días</a></li>
<li><a href="#">por Meses</a></li>
<li><a href="#">por Meses y Días</a></li>
<li><a href="#">por Años</a></li>
</ul>
</li>
<li class="title"><a id="4" href="#4"><span>Mapa de Comportamiento</span></a>
</li>
<li class="title"><a id="5" href="#5"><span>Máximos y Mínimos</span></a>
<ul>
<li><a href="#">por Días</a></li>
<li><a href="#">por Mes</a></li>
<li><a href="#">por Año</a></li>
</ul>
</li>
<li class="title"><a id="6" href="#6"><span>On-line</span></a>
<ul>
<li><a href="#">ATM</a></li>
<li><a href="#">POS</a></li>
</ul>
</li>
<li id="bottom">
<p>By Switch Software</p>
</li>
</ul>
</div>
y la hoja de estilo
*{
margin: 0;
padding: 0;
}
body {
text-align: center;
margin-top: 0px;
font-family: Calibri, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
#wrap {
margin: 0px auto 0 auto;
width: 160px;
text-align: left;
}
a {
text-decoration: none;
}
.menu{
width: 160px;
background: #e3e3e3;
list-style: none;
border: 1px solid #b2b2b2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#dcdcdc));
font-size: 13px;
/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #f5f5f5, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#f5f5f5, endColorstr=#dcdcdc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#f5f5f5, endColorstr=#dcdcdc)"; /* IE 8 */
}
.title {
overflow: hidden;
border-top: 1px solid #fff;
}
.menu li.title:first-child {
border-top: none;
}
.title a span {
display:block;
padding:5px 5px 5px 10px;
color: #000;
}
.title ul li a {
display: block;
padding-left: 20px;
line-height: 30px;
text-decoration: none;
font-size: 12px;
background: #fff;
color: #464646;
}
.title ul li a:hover {
background: #bbc5cf;
color: #000;
}
.title ul li a {
height: 0px;
display: block;
/* CSS3 Transition Effect */
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
:target + ul li a {
height: 30px;
}
#bottom p {
font-size: 10px;
padding: 10px 10px 10px 20px;
border-top: 1px solid #fff;
}
