Transición de color de fondo

Estoy tratando de hacer un efecto de transición background-coloral pasar el cursor sobre los elementos del menú, pero no funciona. Aquí está mi código CSS:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

El #nav dives una ullista de menú de elementos.

Hasta donde yo sé, las transiciones funcionan actualmente en Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Esto debería producir un efecto de desvanecimiento para usted en estos navegadores:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

Nota: Como señaló Gerald en los comentarios, si coloca la transición en a, en lugar de a:hoverhacerlo, se desvanecerá al color original cuando el mouse se aleje del enlace.

Esto también puede ser útil: Fundamentos de CSS: Transiciones CSS 3

Para mí, es mejor poner los códigos de transición con los selectores originales / mínimos que con: hover o cualquier otro selector adicional:

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>