[MENU] Efeito

Detalhes da dúvida

Versão do fórum : Invision
Nível de acesso : Fundador
Navegador usado : Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : Na verdade, estou editando o fórum ainda, então é comum ocorrer erros ou bugs.
Endereço do fórum : http://runegames.forumeiros.com/

Descrição do problema

Bom,na imagem que forneci acima o problema é o seguinte quando passo o mouse por cima do Botão Inicio, fica com uma caixa branca.

Eu queria que ficasse igual ou parecido com este fórum: http://forum.brasilplaygames.com.br/forum, OBS: O efeito que quero é quando passa o mouse por cima.

Aqui é todo o Código CSS que venho editando há alguns dias:

Código:

.linklist {
display: none !important;
}
.linklist li{display:none !important;}

a[href="/search?search_id=newposts"], a[href="/search?search_id=egosearch"], a[href="/search?search_id=unanswered"]{display:none !important;}
a[href="/u1"]{-moz-border-radius:3px;-webkit-border-radius:3px;background: #ED1AEFurl(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);border-radius:3px;padding:2px;text-shadow:#ED1AEF 0px 0px 4px}
a[href="/search?search_id=newposts"], a[href="/search?search_id=egosearch"], a[href="/search?search_id=unanswered"]{display:none !important;}
a[href="/u2"]{-moz-border-radius:3px;-webkit-border-radius:3px;background: #ED1AEFurl(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);border-radius:3px;padding:2px;text-shadow:#ED1AEF 0px 0px 4px}
a[href="/search?search_id=newposts"], a[href="/search?search_id=egosearch"], a[href="/search?search_id=unanswered"]{display:none !important;}
a[href="/u3"]{-moz-border-radius:3px;-webkit-border-radius:3px;background: #3300FFurl(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);border-radius:3px;padding:2px;text-shadow:#3300FF 0px 0px 4px}
table.ipbtable tfoot td {
   background-color: #FFF;
   }
tfoot {
display: none !important;
vertical-align: middle;
border-color: inherit;
}
table.ipbtable th {
   padding: 1px;
   }
#gfooter {
display: none !important;
background-color: #464c55;
color: #fff;
font-size: .8em;
margin: 8px 0;
padding: .5em;
text-align: right;
}
.postprofile-details {
margin: 0.4em;
word-wrap: break-word;
}
.qreply {
background-color: #FFFFFF;
border: 1px solid #000;
margin: 1em auto;
padding: 6px;
width: 90%;
}
.bar {
background-color: #FFFFFF;
padding: 5px;
}
.post {
background-color: #fff;
border-bottom: 10px solid #F2F2F2;
}
#submenu {
background: url(http://worldwartwozone.com/forums/public/style_images/WorldWarIIZone/maintitle.png) repeat-x scroll 0 0 #252525;
border: 1px solid #666;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.45);
color: #666;
font-size: 14px;
font-weight: 300;
  overflow: hidden;
margin-bottom: 6px;

padding: 14px 14px 14px 20px;
 
}
#submenu ul li a {
color: #FFF;
height: 38px;
margin: 0 .8em 0 0;
outline: medium none;
padding: 11px 7px 8px 8px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-transform: uppercase;
}

Olá!

Utilize esse código CSS:

Código:

#submenu ul li a:hover{-moz-transition-duration:1s;-o-transition-duration:1s;-webkit-transition-duration:1s;background:rgba(111,111,111,0.67);padding:15px;text-decoration:none;transition-duration:1s}

Até mais.