Li:hover passando da linha

[CrisRodrigues 1]

Olá, coloquei 5 Li com uma imagem para cada link a dentro da Li, após isso eu coloquei um :hover na Li para que a imagem trocasse ao passar o mouse por cima, más acontece que o width esta 100%, e não posso troca-lo porque o meu div não ficaria centralizado no caso, alguem tem uma solução? Exemplificando: o width do botão é de 184px; e o width do hover ficou em 100%(toda a pagina), segue  código:

 

Style.css:

#ranking{
	width:100%;
	margin-top:1155px;
	position: absolute;
	margin-left:-388px;
}
#ranking ul{
	width:100%;
	text-align: center;
	padding:0px;
	margin:0px;
	list-style: none;
}

#ranking ul li {
	width:100%;
	background:url(../imagens/button.png) no-repeat center;
	padding:10px;
	margin:0px;
}
#ranking ul li a{
	height:27px;
	width:184px;
	font-family: "Myriad Pro";
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color:#E4E4E4;
}
#ranking li a:hover{
	
}

#ranking ul li:hover{
	background:url(../imagens/buttonhover.png) center no-repeat;
}

Index.php:

<div id="ranking">
	<ul>
		<li><a href="#">Top PvP</a></li>
		<li><a href="#">Top PK</a></li>
		<li><a href="#">Top Clan</a></li>
		<li><a href="#">Top Online</a></li>
		<li><a href="#">Boss Online</a></li>
		
	</ul>
</div>