重叠HTML边框底部

Question

我正在制作导航栏。它的底部有一个边框。现在我想为活动类提供边框的另一种颜色。它应该代替导航边界，但它显示在它上面。

如何将蓝线放在活动主页按钮下面的绿线位置并保持绿色？

CSS代码： https://gist.github.com/matthijs110/9859d4e2a3983383bbb0

HTML代码： https://gist.github.com/matthijs110/a09c4cb045eebeb89a4a

Answer 1

这非常简单..您只需要设置margin-bottom: -3px。

您的CSS应如下所示：

.navbar {
    border-bottom: 3px solid #5cb85c;
    width: auto;
}

.active {
    border-bottom: 3px solid #5bc0de;
    margin-bottom: -3px;
}

这是一个小提琴：http://jsfiddle.net/4NLYZ/