Css 如何在引导导航栏悬停上添加幻灯片动画

我试图添加平滑幻灯片悬停效果引导导航栏在这一点上。我想做的是在每个悬停导航上水平滑动活动类样式。 正如您可以从我的try right now中看到的，样式只是跳到任何悬停元素的顶部，而活动类仍然停留在那里

以下是我为此使用的CSS：

.navbar-nav>li {
    width: 120px;
    text-align:center
}
.navbar {
    margin-bottom: 30px;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background-color: darkgreen;
    color: white;
}
.navbar .nav > li > a:hover {
    background-color: darkgreen;
    color: white;
}

我还使用了这个jquery，它没有经过

$( document ).ready(function() {
   $(".navbar .nav > li > a").on("mouseenter", function() {
       $( '.navbar .nav > li' ).addClass( "active" );

   }).on("mouseleave", function() {
    $( '.navbar .nav > li' ).removeClass( "active" );
}); 
});

您能告诉我如何通过添加悬停/滑动效果使导航栏更具交互性吗

---

谢谢

请参见：Hi Bass，但这不是我问题的答案，因为我想将背景样式从一个li移动到悬停