Hola,
 
Tengo un menú en color rojo y deseo que cuando pase el ratón por encima, el color del texto pase a marrón. Hasta ahí bien, pero el problema viene cuando el ratón sale del elemento, ya que en vez de hacerme la transición contraria, de marrón a rojo, lo que hace primero es poner la opacidad del rojo al máximo (1) para después ya llegar al 0.5. Yo quiero que desde el marrón puro vaya al rojo 0.5 tal y como se produce con el hover. El código es el siguiente:
 
li{
	letter-spacing: 2px;
	margin-bottom: -10px;
	max-width: 280px;
        color: #ff0000;
	opacity: 0.5;
  	transition: opacity 1s linear;
}
li:hover{
	color: #9b2108;
	opacity:1;
}
 
Saludos. 
  
 
 


