title: How to add slide animate on Bootstrap Navbar hover
body: <p>I am trying to add smooth slide hover effect on Bootstrap navbar at this <a href="http://jsfiddle.net/Behseini/T62Ep/2/" rel="nofollow noreferrer">JS Fiddle</a>. What I would like to do is sliding the active class style horizontally on each hovered nav.</p>
  <p>As you can see from my try right now styles just jumps on the top of any hovered element and the Active class still stay there.</p>
  <p>Here is the CSS I am using for this:</p>
  <pre><code>.navbar-nav&gt;li {
      width: 120px;
      text-align:center
  }
  .navbar {
      margin-bottom: 30px;
  }
  .navbar .nav &gt; .active &gt; a, .navbar .nav &gt; .active &gt; a:hover, .navbar .nav &gt; .active &gt; a:focus {
      background-color: darkgreen;
      color: white;
  }
  .navbar .nav &gt; li &gt; a:hover {
      background-color: darkgreen;
      color: white;
  }
  </code></pre>
  <p>I also used this jQuery which didn't go through:</p>
  <pre><code>$( document ).ready(function() {
     $(&quot;.navbar .nav &gt; li &gt; a&quot;).on(&quot;mouseenter&quot;, function() {
         $( '.navbar .nav &gt; li' ).addClass( &quot;active&quot; );
         
     }).on(&quot;mouseleave&quot;, function() {
      $( '.navbar .nav &gt; li' ).removeClass( &quot;active&quot; );
  }); 
  });
  </code></pre>
  <p>How can I make the navbar more interactive by adding hover/slide effect?</p>