Links barra navegación se mueven

Hola a todos:

Ya me he lanzado a crear mi primera web. Por ahora todo bien (en 4 días sólo he hecho 1 hoja...). Tengo un problema q no puedo solucionar:

Tengo la barra d navegación configurada y funciona todo bien (estilos, enlaces, etc.) pero cuando en a:hover incluyo la instrucción font-size:1.2em; funciona pero al hacer más grande el texto mueve todos los enlaces en la barra.

Se puede hacer que al pasar el ratón por encima del enlace sea sólo este el que se haga + grande sin afectar a la posición del resto?

Gracias por vuestra ayuda!!!

HTML:

<div id="navegacion">
<ul>
<li><a href="empresa/historia.html" target="_self" title="Empresa">EMPRESA</a><li><a href="#" target="_self" title="productos">PRODUCTOS</a></li><li><a href="i+d/i+d.html" target="_self" title="I+D+I">I+D+I</a></li><li><a href="delegaciones/delegaciones.html" target="_self" title="Delegaciones">DELEGACIONES</a></li><li><a href="noticias/noticias.html" target="_self" title="Noticias">NOTICIAS</a></li><li><a href="contacto/contacto.html" target="_self" title="Contacto">CONTACTO</a></li>
</ul>
</div>


CSS:

#navegacion{
background-image:url(imagenes/fondobarra.jpg);
height:30px;
border-top: black 1px solid;
border-bottom: black 1px solid;
text-align:center;
}
#navegacion a: {}
#navegacion a:link {color:black; font-weight:bold; text-decoration:none;}
#navegacion a:visited {color:grey; text-decoration:none;}
#navegacion a:hover {color: white; background-color:silver; text-decoration:underline; font-size:1.2em;}
#navegacion a:active {}