Cambio de opacidad en texto

[horizzont]

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.