Foros del Web » Creando para Internet » CSS »

Problemas color de la letra en un menu

Estas en el tema de Problemas color de la letra en un menu en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/09/2006, 15:39
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 14 años, 4 meses
Puntos: 0
Problemas color de la letra en un menu: SOLUCIONADO

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> 

Última edición por lenz; 03/10/2006 a las 14:22 Razón: Cambios en el codigo css - Solucionado
  #2 (permalink)  
Antiguo 03/10/2006, 13:20
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 14 años, 4 meses
Puntos: 0
Solucionado

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;	
}
  #3 (permalink)  
Antiguo 03/10/2006, 13:34
Avatar de krloss  
Fecha de Ingreso: abril-2006
Mensajes: 55
Antigüedad: 11 años, 7 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 03/10/2006, 14:20
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 14 años, 4 meses
Puntos: 0
js

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');
}
  #5 (permalink)  
Antiguo 04/10/2006, 07:32
Avatar de krloss  
Fecha de Ingreso: abril-2006
Mensajes: 55
Antigüedad: 11 años, 7 meses
Puntos: 1
man la funcion donde la llamas ? en onload o como

trhanx por tu tiempo


salu2
  #6 (permalink)  
Antiguo 04/10/2006, 09:36
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 14 años, 4 meses
Puntos: 0
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:50.