title: background color change on mouse leave bootstrap navbar
body: <p>I have created a navigation menu using Bootstrap 3 navbar. But It has a small issue:
  When mouse moves over a menu item it perfectly change its color to dark green. But when I leave the menu, it does not directly changes its color to light-green. It quickly changes to gray(default) color and then turn to light green.</p>
  
  <p>Below is a screen of my navigation bar:</p>
  
  <p><img src="https://i.stack.imgur.com/WAKJN.jpg" alt="enter image description here"></p>
  
  <pre><code>.navbar-default{
      background-color: #4ec67f;
  }
  
  .navbar-nav &gt; li &gt; a {
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
  }
  
  li.active{
      background: #34b586 !important;
  }
  
  li &gt; a:focus{
      background: #34b586 !important;
  }
  
  li:hover &gt; a{
      background: #34b586 !important;
      color: #FFFFFF !important;
  }
  
  li &gt; a:hover{
      color: #FFFFFF !important;
      background: #34b586 !important;
  }
  </code></pre>
  
  <p>How to avoid this problem? Thanks in advance.</p>