重叠的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/