Bootstrap 3 Navbar 现在就像 Twitter Navbar

Question

我想创建一个导航栏，就像今天的导航栏 twitter。但是我发现问题是在悬停的导航栏菜单中，很少有区域越过高导航线，我想关闭边框下的文本菜单。我使用 Bootstrap 3 创建的代码，您可以修复它，使其看起来像今天的导航栏 twitter 吗？

我的 CSS：

body {
   background-color: #ecedee;
}
#container {
   margin-right: auto;
   margin-left: auto;
   background-color: #ffffff;
}

.navbar {
   margin-bottom: 0;
   background: #fff;
   border: none;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
 }

 .navbar-brand {
   position: relative;
   padding: 21px 25px 21px 25px;
   margin: 0!important;
   transition: all 0.3s ease-in-out;
   color: #1c1c1c;
   -moz-transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
}

  .navbar-default .navbar-nav {
   margin-right: 0px!important;
   position: relative;
   transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -webkit-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   }

  .navbar-default .navbar-nav > li {
margin-left: 5px;
   }

.navbar-default .navbar-nav > li:first-child {
    margin-left: 0px;
 }

  .navbar-default .navbar-nav > li > a {
    color: #1c1c1c;
   display: block;
   font-size: 14px;
   font-weight: 200;
   padding: 20px;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
}

  .navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
      border-bottom: 3px solid #1c1c1c;
  }

这是我的详细信息代码 LINK

Answer 1

你可以像这个例子一样使用； http://jsbin.com/fosulida/1/ ，我在非活动链接中添加了带背景颜色的边框