重叠的HTML边框底部

Question

I'm making a Navigation bar. It has a border at the bottom. Now I want to give the active class a other color for the border. It should be in place of the navigation border, but it shows above it.

How can I put the blue line on the place of the green line under the active Home button and keep green at the rest?

CSS Code: https://gist.github.com/matthijs110/9859d4e2a3983383bbb0

HTML Code: https://gist.github.com/matthijs110/a09c4cb045eebeb89a4a

Answer 1

This is pretty simple.. You just need to set the margin-bottom: -3px .

Your CSS should look like this:

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

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

Here's a fiddle: http://jsfiddle.net/4NLYZ/