Transición del color de fondo

Estoy tratando de hacer un efecto de transición con el color de fondo al pasar el ratón por 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 div es una lista de elementos del menú ul.

Hasta donde yo sé, las transiciones actualmente funcionan 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; } 
 Navigation Link 

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