Transizione di colore di sfondo

Sto cercando di creare un effetto di transizione background-colorquando si passa il mouse sulle voci di menu, ma non funziona. Ecco il mio codice 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;
}

Il #nav divè un menu ulelenco di elementi.

Per quanto ne so, le transizioni attualmente funzionano su Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Questo dovrebbe produrre un effetto di dissolvenza per te in questi browser:

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: come sottolineato da Gerald nei commenti, se metti la transizione su a, invece di su a:hover, tornerà al colore originale quando il mouse si allontana dal collegamento.

Potrebbe essere utile anche questo: Fondamenti CSS: Transizioni CSS 3

Per me, è meglio inserire i codici di transizione con i selettori originali / minimi piuttosto che con: hover o altri selettori aggiuntivi:

#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>