Estoy hacien un menu con css y cuando voy al segundo nivel necesito que se mantenga marcado el li correspondiente, logre hacer que mantenga el fondo del hover, pero no el color de la letra, dejo el codigo css y el html, espero me puedan ayudar.
Cuando paso del primer nivel al segundo me mantiene el background, la imagen y el color de fondo pero el color del texto en vez de quedar blanco como en el "li a:hover" me lo pone con el color del "li a"
Ademas esto no me funciona para IE, donde no mantiene los datos del hover, segun tengo entendido el IE no reconoce el li:hover y esto lo tendria que hacer con javascript, si me ayudan a que se vea bien en Firefox, despues veo como pasarlo a IE,
Código:
#menu {
padding:0px;
margin:0px;
height:19px;
line-height:19px;
}
#menu li {
list-style:none;
position: relative;
margin:0px;
float:left;
display:block;
padding-left:5px;
margin-left:-5px;
}
#menu li:hover, #menu li.selLi {
padding-left: 0px;
margin-left: 0px;
color: #ffffff;
background: url(../Images/bullet_menu.gif) no-repeat #0191C7;
}
#menu li a {
color: #003371;
font-family: Arial;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
display:block;
padding-left:1px;
padding-right:25px;
margin:0px;
}
#menu li a:hover {
color: #ffffff;
background: url(../Images/bullet_menu.gif) no-repeat #003371;
height: 19px;
}
#menu li ul {
position: absolute;
overflow: visible;
display: none;
padding: 0px 0px 0px 0px;
margin-left: 142px;
margin-top: -21px;
background: #1467A5;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#menu li ul li {
margin-left: 0px;
padding:0px 0px 0px 0px;
}
#menu li ul li:hover, #menu li ul li.selLi {
color: #ffffff;
padding-left: 0px;
margin-left: 0px;
background: #003371;
}
#menu li ul li a {
font-family: Arial;
font-style: normal;
font-size: 11px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background: none;
display: block;
}
#menu li ul li a:hover {
color: #ffffff;
padding-left: 0px;
margin-left: 0px;
background: #003371;
}
#menu li ul li ul {
margin-top: -21px;
margin-left: 157px;
}
/* no-IE browsers */
#menu li:hover > a {
color: #ffffff;
}
#menu li>ul{
color: #ffffff;
width:157px;
margin-top:-21px;
}
#menu li:hover ul > ul{
color: #ffffff;
width:157px;
display:none;
}
#menu li:hover > ul {
color: #ffffff;
overflow:visible;
width:157px;
display:block;
}
Código HTML:
<ul id="menu">
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Acerca de <b>AGF</b> Allianz</a></td>
</tr>
<tr>
<td width="157" bgcolor="#DEDFE0"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
<ul>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Quienes somos</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Nuestros Accionistas</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
<ul>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="listado_contenidos.php?id_item_front=206">Allianz en el mundo</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">AGF en el mundo</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Nuestras Cifras y el Mercado</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
</ul>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Nuestro Compromiso</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
<ul>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Mision</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Vision</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Valores</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
</ul>
</li>
<li>
<table border="0" width="157" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="right"><a href="#">Historia</a></td>
</tr>
<tr>
<td width="157" bgcolor="#FFFFFF"><img src="Images/dot_clear.gif" alt="" width="1" height="1" border="0"></td>
</tr>
</table>
</li>
</ul>
</li>
</ul>