Bootstrap - 在悬停时添加边框时折叠导航栏错误

Question

我在我的导航栏li上添加了一个边框底部，如下所示：

.navbar-default .navbar-nav li a:hover{
    border-bottom: 4px solid #62c4a4;
}

然而，这会导致导航栏折叠显示为带有滚动条的小方框，而不是展开列表项。

如何确保导航栏折叠正常展开并且悬停效果边框仍显示？

代码笔http://codepen.io/meek/pen/NNprYb

Answer 1

尝试将height的{​​{1}}设置为.navbar-collapse.collapse.in .navbar-nav，如下所示：

auto

因为Bootstrap CSS将.navbar-collapse.collapse.in .navbar-nav { height: auto; } 设置为height，导航栏的高度。当菜单处于活动状态时，您想要更改它（将其设置为70px）。

Answer 2

我相信这与您将高度设置为70px有关;

.navbar-default, .navbar-nav {
//height: 70px;
}

当你发表评论时，你没有得到滚动条。