Fundo azul automático quando clico no menu (versão mobile)

Olá, estou com um problema no meu site, que sempre que clico em um link aparece um fundo azul automático ao redor dele (como se fosse um background-color), que aparece apenas durante o ato de clicar,  já tentei mudar todas as propriedades dos links como:  a:hover, a:visited, a:active, a:focus, e não consegui remover. Na versão de PC eu apena fiz isso e resolvi o problema:

* {

/NÃO PERMITE QUE INTES E CARACTERES SEJAM SELECIONADOS/

-webkit-touch-callout: none; / iPhone OS, Safari /

 -webkit-user-select: none; /* Chrome, Safari 3 */

 -khtml-user-select: none; /* Safari 2 */

 -moz-user-select: none; /* Firefox */

 -ms-user-select: none; /* IE10+ */

 user-select: none; /* Possível implementação no futuro */

 /* cursor: default; */

 }

	 

	Já na versão mobile isso não deu certo.

	No menu superior do celular eu consegui tirar esse fundo dos itens do menu adicionando height: 0px,  padding: 0px nos links.

	Mas nos menu do footer não consegui resolver o problema. 

	Em fim, eu sou novo na programação, espero que tenham entendido o meu problema (não é o azul do link padrão, e sim um fundo azul ao redor do link que aparece e desaparece quando clicado). 

	Vou mostrar o css e html do roda-pé que pediram:

 <!-- RODAPÉ -->

 <footer id="roda-pe">

 <div id="roda-centro">

 <ul>

 <li><a href="#titulo1" class="scroll" id="menu-rodape-1"><div id="quadrado1">Sistema</div></a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li>

 <li><a href="#titulo2" class="scroll" id="menu-rodape-2">Sobre Nós</a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li><br>

 <li><a href="#titulo3" class="scroll" id="menu-rodape-3">Planos</a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li>

 <li><a href="#titulo4" class="scroll" id="menu-rodape-4">Contato</a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li>

 <li><a href="#" class="scroll" id="menu-rodape-5">Login</a></li>

 </ul>

 <br>

 <ul>

 <li><a href="#titulo1" class="scroll" id="menu-rodape-1">Facebook</a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li>

 <li><a href="#titulo1" class="scroll" id="menu-rodape-1">Goolge+</a></li>

 <li><div id="nbsp">&nbsp|&nbsp</div></li>

 <li><a href="#titulo1" class="scroll" id="menu-rodape-1">linkedin</a></li>

 <br><br>

 <i>Todos os direitos reservados.</i>

 </ul>

 </div>

 </footer>

 </body>

 </html>

	 

	css

 <style>

 /* RODAPÉ */

 #roda-pe {

 background-color: black;

 width: 100%;

 position: relative;

 margin-top: 50px;

 height: 200px;

 position: relative;

 top: 200px;

 }

  

 #roda-pe i {

 color: rgb(184, 178, 178);

 margin-left: 120px;

 position: relative;

 margin: 0 auto;

 }

  

 #roda-pe li {

 color: white;

 display: inline-block;

 font-size: 18px;

 background-color: none!important;

 width: auto;

 cursor: pointer;

 }

  

 #roda-pe a {

 text-decoration: none;

 color: white;

 height: 0px;

 width: 0px;

 padding: 0px;

 margin: 0px;

 cursor: pointer;

 position: relative;

 }

  

 #roda-pe ul {

 position: relative;

 margin: 0 auto;

 max-width: 500px;

 text-align: center;

 }

  

 #roda-pe a:hover {

 color: red;

 transition-duration: 1s;

 }

  

 #roda-pe a:focus, #roda-pe a:hover {

 outline: none;

 text-decoration: none;

 }

  

 #roda-centro {

 position: relative;

 top: 50px;

 }

 </style>