在CSS的菜单的边框底部设置活动li覆盖的边框底部

Question

这是我的小提琴：http://jsfiddle.net/gaoshun92/58kvpdpv

嗨，请帮我解决主动菜单在导航边框底部有边框底部覆盖的想法。我试过但活动元素总是在线下，而不是覆盖。任何建议都是一个很大的帮助。

ul {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc; <----- MAIN LINE FOR WHOLE MENU
}
ul>li.active {
border-bottom: 5px solid #555; <----- I WANT THIS OVERRIDE ON THE LINE
}

Answer 1

通过在底部添加负边距（-5px），因为边框厚度为5px，您可以解决此问题：jsfiddle

＆＃13;

＆＃13;

body, html {
    margin: 0;
    padding: 0;
}
header {
    background-color: #eee;
}
ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
ul>li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
}
ul>li:first-child {
    margin-left: 0;
}
ul>li>a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px 0 5px 0;
}
ul>li.active {
    border-bottom: 5px solid #555;
    margin-bottom: -5px
}

＆＃13;

<header>
    <nav>
        <ul>
            <li class="active"><a href="#" title="Home">Home</a>
            </li>
            <li><a href="#" title="About">About</a>
            </li>
            <li><a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

＆＃13;

＆＃13;

＆＃13;