Transition no tiene efecto

[TrinityCore]

Hola gente, espero esten bien..

Resulta que estoy creando una web y en muchos casos para botones de menu, imagenes me encuentro con que al utilizar el "transition:300ms;" este no tiene efecto...

en algunos botones e imagenes si, pero en otras no... la verdad no se porque sera y espero me ayuden,, aqui les dejo un ejemplo donde este no da efecto..

Código HTML:

<div class="header">
<div id="menu_principal">
<ul id='top_menu_true'>
	<li><a href='$url'>Inicio</a></li>
	<li><a href='$url/cambiar_password.php'>Cambiar Contrase&ntilde;a</a></li>
	<li><a href='$url/como_conectar.php'>Como Conectar</a></li>
	<li><a href='$url/buscar_personajes.php'>Buscar Personajes</a></li>
	<li><a href='$url/jugadores_baneados.php'>Jugadores Baneados</a></li>
	<li><a href='$url/foro/index.php'>Foro</a></li>
	</ul>
</div>
</div> 

Código CSS:

#menu_principal ul#top_menu_true li{
    /*background-color:#000;*/
    background-image:url('../images/menu_top.png');
    background-position:center;
    float:left;
    padding:26px 0px;
    border-right: 1px solid #1E1A18;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #1E1A18;
    transition:300ms;
}#menu_principal ul#top_menu_true li:hover{
    background-image:url('../images/menu_top_hov.png');
    background-position:center;
}
 

Asi me pasa con muchas cosas, pero con muchas otras no.
Espero puedan ayudarme, gracias de antemano!