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/，我为非活动链接添加了背景颜色的边框

Bootstrap 3 Navbar现在就像Twitter Navbar一样

1 个答案: