Hide click box (tap) on an HTML5/CSS3 website?

Question

I’m making a site to serve with an app for a college job, the desing is ok (for now, and worked cool on smartphone.

However, in the menu there is an error when I press some menu item, a light blue box appears, disturbing the app desing, another thing is the Hover of < li > that are appearing only when I keep my finger pressed for a long time in the item. Follow the error screenshot:

The mysterious blue box disturbs even the effect of the Hover, its color..

If it is not possible to remove it, how do I change the color of the box? Another error is the delay to load the page (a white screen appears between this process), example references, strange, because only the fonts are online.

Here then the css and html files (of a template) without images, of course:

$(document).ready(main);

var contador = 1;

function main () {
	$('.menu_bar').click(function(){
		if (contador == 1) {
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});

	// Mostramos y ocultamos submenus
	$('.submenu').click(function(){
		$(this).children('.children').slideToggle();
	});
};

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200);

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    background-color: #F9FFF9   ;
    font-family: 'Titillium Web',sans-serif;
    text-align: justify;
}


.menu_bar {
	display:none;
    margin: 0;
}

header {
	width: 100%;
}

header#titulo h1{
    font-size: 19px;
    /*margin-bottom: 0;
    margin-top: 0;*/
    color: white;
    text-align: center;
    background: #d40000;
}

header#titulo h2{
    font-size: 13pt;
    color: white;
    background: #80c939;

    text-align: center;
}

header nav {
	background:#80c939;
	z-index:100%;
	max-width: 100%;
	width:100%;
	margin: 0;
    
}

header nav ul {
	list-style:none;
    margin: 0;
    text-align: center;
}

header nav ul li {
	display:inline-block;
	position: relative;
}

header nav ul li:hover {
	background:#d40000;
}

header nav ul li a {
	color: #444444;
	display:block;
	text-decoration:none;
	padding: 20px;
}

header nav ul li a:hover {
	color: white;;
}

header nav ul li a span {
	margin-right:10px;
}

nav img#logo{
    opacity: 0;
    position: relative;
    float: right;
    top: 0;
}
nav img#logo:hover{
    opacity: 1;
}


footer#final{
    clear: both;
    border-color: #80c939;
    border-style: solid;
}



footer#final p{
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    text-align: center;
}

.topo{
    display: block;
    width: 30px;
    height: 30px;
    float: right;
    margin: 5px;
    position: fixed;
    bottom: 0;
    right: 0px;
}
.topo:hover{
    cursor:pointer;
}

@media screen and (max-width: 800px) {
	body {
		padding-top:60px;
	}

	.menu_bar {
		display:block;
        margin: 0;
		width:100%;
        height: 60px;
		position: fixed;
		top:0;
		background:#80c939;

	}

	.menu_bar .bt-menu {
		display: block;
		padding: 15px;
        margin: -1px;
		color: #444444;
		overflow: hidden;
		font-size: 25px;
		font-weight: bolder;
		text-decoration: none ;
	}

	.menu_bar span {
        margin-top: -13px;
        padding: -10px;
		float:right;
		font-size: 40px;

	}
    
    .menu_bar a{
        text-align: center;
    }

	header nav {
		width: 80%;
		height: calc(100% - 50px);
		position: fixed;
		right:100%;
		margin-top: -7px;
		overflow: scroll;
        
	}
    
    header nav::-webkit-scrollbar{
    display: none;
    }

	header nav ul li {
        height: 50px;
	display: block;
	/*border-bottom:1px solid rgba(0,0,0,.4);*/
        text-align: left;
        border: 0px;

	}
    
    header nav ul li span{
        border: 0px;
        margin-top: -8px;
        float: right;

    }
    header nav ul li span img{
        border-width: 0;
        border: 0px;
    
        
    }
    
    
	header nav ul li a {
        margin-top: 0px;
        font-weight: bold;
		display: block;
	}
    nav img#logo{
        opacity: 1;
        position: auto;
        float: right;
        
    }

}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="../css/estilo.css">
	<script src="http://code.jquery.com/jquery-2.1.0.js" ></script>
	<script src="../scripts/menu.js"></script>
	<script src="../scripts/voltar.js"></script>
</head>
<body>
    <div id="interface">
	<header>
		<div class="menu_bar">
            <a class="bt-menu"><span><img src="../icones/menu.png"/></span><img src="../icones/logo.png"/></a>
		</div>

		<nav>
			<ul>
				<li><a href="../index.html"><span><img src="../icones/inicio.png"/> </span>INICIAL</a></li>
				<li><a href="../paginas/artigos.html"><span> <img src="../icones/artigos.png"/> </span>ARTIGOS</a></li>
				<li><a href="../paginas/multimidia.html"><span><img src="../icones/multi.png"/>  </span>MULTIMÍDIA</a></li>
				<li><a href="../paginas/referencias.html"><span><img src="../icones/referencias.png"/>  </span>REFERÊNCIAS</a></li>
								<li><a href="../paginas/sobre.html"><span><img src="../icones/sobre.png"/>  </span>SOBRE</a></li>
			</ul>
<img id="logo" src="../imagens/banner.png"/>
		</nav>
	</header>
	<section id="corpo">
    <header id="titulo">
        <h1>Página Inicial</h1>
        <h2>Teste </h2>
    </header>
	   
	    
	</section>
    </div>
    
    <footer id="final">
       <span class="topo"><img src="../icones/voltar.png"/> </span>
        <p><b>&copy; 2015 - IFTM</b> <br>
        Leonardo, Guilherme, Carlos V., Matheus, Victor A. e Jóse Humberto. <br>
        <b>Desing por Leonardo Vilarinho.</b></p>
    </footer>
    
</body>
</html>

Answer 1

About the delay in loading, I don’t know what can be, about this box, if the color is set in css, change the background to transparent or display: none; or even opacity: 0;