Lista não ordenada (ul) com imagens - duplicação de imagem

Olá pessoal!

Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:

...

<span class="menuRedesSociais">
	<ul>
 <li id="img1"><a href="#"</a></li>
 <li id="img2"><a href="#"></a></li>
 <li id="img3"><a href="#"></a></li>
 <li id="img4"><a href="#"></a></li>
	</ul>
</span>

span ul {

	margin: 0;
	padding: 0;
}

span li {

	list-style: none;
	display: inline-block;
}

span a:link, a:visited {

	padding: 15px;
}

li#img1 a{

	background-image: url("#img1");
	background-repeat: no-repeat;
}

li#img2 a{

	background-image: url("#img2");
	background-repeat: no-repeat;
}

li#img3 a{

	background-image: url("#img3");
	background-repeat: no-repeat;
}

li#img4 a{

	background-image: url("#img4");
	background-repeat: no-repeat;
}

	A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.

	 

	Agradeço muito se alguém puder me ajudar.