无法点击<a> tag on first click using angular &amp; bootstrap 3.3.7

Question

Here my issue is i unable to click on the tags for the first click/first time it is flickering and second click then it is performing its action.

<div class="container">

    <a href="#" class="navbar-brand"></a>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">

        <ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
            <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#info">info</a></li>


        </ul>
    </div>
</div>

Below is my CSS.

.navbar>li {
    display: inline-block;
    list-style: none;
}

.navbar-nav>li>a {

    color: #788791;
    display: inline-block;
    padding: 0 15px 3px 15px;
    text-decoration: none;
    background-color: white !important;
}

.navbar-nav>li>a:hover {

    font-size: 14px;
    color: #788791;
    border-bottom: solid 4px #0f8287;
    margin-bottom: -3px;

}


.navbar-brand {
    padding-top: 0px !important;
    padding-bottom: 0 !important;
    height: 20px;
}

.navbar {
    height: 20px !important;
    padding-top: 0px !important;
    padding-bottom: 0 !important;
}

.navbar-toggle {
    padding: 0 0;
    margin-top: 7px;
    margin-bottom: 0;
}

Below is my inspect element.

那么在这里，第一次单击时它会滑动，而第二次单击时却无法执行该操作，可能会导致此问题？