现在像Twitter导航栏一样引导3导航栏

Question

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

我的 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;
  }

这是我的详细代码链接

Answer 1

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