Элемент Bootstrap li запоминается белым

Question

Я столкнулся с проблемой, когда элемент Bootstrap после посещения остается белым цветом фона.Вот 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"><a href="#1">Home</a></li>
                <li class ="nav-btn"><a href="#2">About Us</a></li>
                <li class ="nav-btn"><a href="#3">Our projects</a></li>
                <li class ="nav-btn"><a href="#4">Cooperation</a></li>
                <li class ="nav-btn"><a href="#5">Services</a></li>
                <li class ="nav-btn"><a href="#7">Contacts</a></li>
                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

В приведенном выше коде вместо ссылки MyEmail у меня есть реальная электронная почта.Это единственный элемент, который остается выделенным после посещения.Я уверен, что это как-то связано с навигационной панелью начальной загрузки, так как у меня есть другой элемент с той же ссылкой mailto , и он отлично работает.

Если у вас есть идеи, что не так, пожалуйста, помогите.Если вы последуете примеру: https://jsfiddle.net/borovec/aq9Laaew/272810/

, вы увидите, что существует та же проблема, если вы откроете меню и нажмете любой элемент, кроме дома, он останется белым фоновым цветом.

Заранее спасибо!

Answer 1

Я думаю, вам просто нужно установить CSS для :focus как ..

li a:focus {
    background-color: rgba(0,0,0,0) !important;
    border:none !important;
}

Answer 2

Попробуйте это

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