[Resolvido] Problemas de compatibilidade CSS x Browsers

Pessoal, boa noite!

O problema parece simples mas já quebrei a cabeça, procurei na net e não achei algo que resolvesse.

No menu do site, quando passo o mouse sobre uma opção do menu ele tem que trocar a cor do fundo e letra (hover).

Isso ele faz, o problema é que o espaço que ele ocupa.

[________________________] -> isso é o espaço definido para o "campo"

xxxxxxxxxxxxxxxxxx -> isso é onde está colorido

-> Exemplificando, no IE fica (da forma correta):

[xxxxxxxxHomexxxxxxxxxx]

-> No Chrome e Firefox fica:

[_______xHomex_________]

Ou seja, no Chrome e Firefox a cor que eu defini como background não ocupa todo o espaço que está disponível, fica apenas ao redor da palavra.

HTML - 1 item do menu:

<div id="menu">
 <ul>
 <li><a href="home.htm" target="meio">Home</a></li>
 </ul>
</div>

CSS

#menu li {

width:200px;
display: inline;
float: left;
}

#menu a:hover{

width:100%;
color:white;
background:#990066;
text-decoration: none;
float:center;
text-align:center;
}

Não tenho a página publicada ainda e não achei uma forma de incluir um print da tela aqui (não sei se por ignorância minha ou porque não tem mesmo).

Toda ajuda é bem vinda!