Bootstrap li item remeins highlighted in white after visited - html

Question

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active">Home</li>
<li class ="nav-btn">About Us</li>
<li class ="nav-btn">Our projects</li>
<li class ="nav-btn">Cooperation</li>
<li class ="nav-btn">Services</li>
<li class ="nav-btn">Contacts</li>
<li class = "nav-item my-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!

Answer 1

Try this
.nav >li>a:focus {
background-color: transparent;
}

Answer 2

I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}