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;
}