CSS Question

Bootstrap's navbar list item changes it's color on click

I am facing an issue in Bootstrap's navbar.
When i right click on one of the list items(link) to redirect it to the another page, it keeps it color Orange(i-e actually a hover color), when i click outside the navbar,the color changes to default color(i-e green).
Why it's all happening?

I think it should keep it default green color even after right click.
Below is the picture of navbar, after i right click on it to move to Shopping page.

enter image description here

Css Code

.navbar-default .navbar-nav > li > a {

color: #6ecd6e;
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffb600;

Answer Source

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #666;
  float: left;
  padding: 20px;
li {
  float: left;
  margin-right: 10px;

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {
  color: #6ecd6e;
  font-size: 15.7px;
  font-weight: 400;
.navbar-default .navbar-nav > li > a:hover {
  color: #ffb600;
<div class="navbar-default">
  <ul class="navbar-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>

In this particular situation based on right clicking as described...what is happening is right clicking is causing the link to be focused, which is why the link is staying orange. In my example I moved the a:focus up to where the green color was declared.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download