Problemas color de la letra en un menu

lenz · #1 (**permalink**) 27/09/2006, 14:39

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>

lenz · #2 (**permalink**) 03/10/2006, 12:20

Ya pude solucionarlo, dejo el css final, al html le saque las tablas dentro de los <li>, si alguin necesita el js, me avisa y lo posteo tambien

Código:

#menu {
	padding:0px;
	margin:0px;
	height:19px;
	line-height:19px;
}
#menu li {
	list-style:none;
    position: relative;
    margin:0px;
    float:right;
    display:block;
    padding-left: 0px;
    margin-left: 0px;
	text-align: right;
	height:19px;
	width:157px;
	border-bottom: 1px solid #cccccc;
}

#menu li:hover, #menu li.selLi {
	padding-left: 0px;
    margin-left: 0px;
	color: #ffffff;
	background: url(../Images/bullet_menu.gif) no-repeat #003371;	
}

#menu li a {
	color: #003371;
	font-family: Arial;
	font-style: normal;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	display: block;
    padding-left: 0px;
	padding-right: 25px;
	margin-left: 0px;
}

#menu li a:hover, #menu li a.selLiH {
	color: #ffffff;
	background: url(../Images/bullet_menu.gif) no-repeat #003371;
	height: 19px;
    padding-left: 0px;
	margin-left: 0px;
}

#menu li ul {
    position: absolute;
    overflow: visible;
    display: none;
	padding: 0px 0px 0px 0px;
	margin-left: -20px;
	margin-top: -20px;
	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;
	border-bottom: 1px solid #ffffff;
}

#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, #menu li ul li a.selLiH  {
	color: #ffffff;
    padding-left: 0px;
    margin-left: 0px;
	background: #003371;
}
#menu li ul li ul {
	margin-top: -20px;
	margin-left: 0px;
}

/* no-IE browsers */
#menu li:hover > a { 
	color: #ffffff; 
}

#menu li>ul{
    color: #ffffff;	
    margin-top:-20px;
	margin-left: 140px;
}
#menu li:hover ul > ul{	
	color: #ffffff;	
    margin-top:-20px;
    display:none; 
}
#menu li ul li > ul{	
	color: #ffffff;	
    margin-top:-20px;
	margin-left: 157px;
    display:none; 
}
#menu li:hover > ul {
	color: #ffffff;
    overflow:visible; 	
    display:block;	
}

krloss · #3 (**permalink**) 03/10/2006, 12:34

holas bueno yo creo q tengo ese mismo problema lo q quiero es selecciones una opcion de una pestaña y q esta se quede sombreado y asi cuando de click en otro se qued asi

eh leido varios codigos pero todos trabajan con los id creo q eso de los id se hace on javascript asi q si puede postearlo te lo agradeceria

salu2

lenz · #4 (**permalink**) 03/10/2006, 13:20

Aqui te dejo el js, espero qeu te sirva no utilizo id, simplemente manejo todo con la posicion en la que se encuentra, lo que si para que esto funcione bien al codigo html del primer mensaje hay que quitarles las tablas de caad item, dejar solo dentro de <li> los <a href=''>titulo</a>

Código:

function activarMenu (nav) {
	if (document.all && document.getElementById(nav).currentStyle) {
		var navroot = document.getElementById(nav);
		var lis=navroot.getElementsByTagName("LI");
		for (i=0; i<lis.length; i++) {
			if(lis[i].lastChild.tagName=="UL"){
				lis[i].onmouseover=function() {					
					this.className += " selLi";
					this.firstChild.className += " selLiH";
					this.lastChild.style.display="block";					
				}
				lis[i].onmouseout=function() {
					this.className = "";
					this.firstChild.className = "";
					this.lastChild.style.display="none";
				}
			}
		}
	}
}

window.onload= function(){
	activarMenu('menu');
}

krloss · #5 (**permalink**) 04/10/2006, 06:32

man la funcion donde la llamas ? en onload o como

trhanx por tu tiempo

salu2

lenz · #6 (**permalink**) 04/10/2006, 08:36

El codigo javascript se "auto llama" a traves de

Código:

window.onload= function(){
	activarMenu('menu');
}

por lo que simplemente en el html pones dentro del <head> la llamada al archivo .js
<script src="menu.js"></script>
y listo, asegurate que el nombre que esta en el .js dentro de activarMenu('NombreIdUL'); sea el mismo que el del id del priemr ul