Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/07/2012, 19:01
diegomel
 
Fecha de Ingreso: abril-2009
Mensajes: 409
Antigüedad: 15 años, 7 meses
Puntos: 3
menu li problema con hover y activo

a ver , mi problema es que yo arme este menu , anda perfecto, el tema es que cuando uno pasa el mouse por los distintos elementos en hover cambia el background como ven, buen lo que queria preguntar es , yo arme un estilo activo el cual toma el elemento activo en ese momento para quedar con el background de un color fijo , el problema es que cuando pasa por arriba, vuelve a tomar el color del li:hover y yo quiero que siga con el del activo, hay forma de hacer eso? (en este ejemplo el estilo activo y el li:hover tienen el mismo color pero la idea es que sean distintos)


Código HTML:
<nav class="menu">
<ul>
<li class="activo" ><a href="/bugzind/sitio/"><img
src="/bugzind/img/user_suit.png" alt="icono">Ver</a></li>
<li ><a href="/bugzind/sitio/update/"><img
src="/bugzind/img/vcard_edit.png" alt="icono"> Editar
datos</a></li>
<li  ><a href="/bugzind/sitio/upd_password/"><img src="/bugzind/img/lock_edit.png"
alt="icono"> Cambiar contraseña</a></li>
<li><a href="#"><img src="/bugzind/img/email_edit.png"
alt="icono"> Modificar email</a></li>
</ul>
</nav>





nav.menu {
	background-color: #ffffff;
	line-height: 23px;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 5px;
}

nav.menu ul li {
	display: block;
	/*	margin: 0px 2px;*/
}

nav.menu ul li:hover {
	display: block;
	/*margin: 0px 2px;*/
	background-color: #ffdddd;
	/*width:180px;*/
}

.activo {
	display:block;
	background-color: #ffdddd;
}

.activo li:hover {
	background-color: #ff8e8e;
}

nav.menu ul li a {
	font-size: 11px;
	font-weight: normal;
	padding: 0 15px;
	text-decoration: none;
	display: block;
	color: #000000;
}