html - 修复边框底菜单

这是我的菜单：http://jsfiddle.net/FLq5c/8/

该链接会将您带到那些在线代码编辑器之一，以便您可以将正确的代码发送给我。

我的问题是，以及“活动”页面为红色，其边框底部也必须为红色。其余的边界底部都必须是绿色的。

我试图通过使用

.customnav .nav > li {
    color: blue;
    margin: 12px 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50;
    line-height: 20px;
}

但这不起作用。它使所有边界底部变为灰色。请告知，请检查jsfiddle链接并在那里更新代码，并将更新后的链接发送给我。您可以在那看到完整的HTML和CSS！

最佳答案

您的.active选择器不如.customnav .nav > li精确，这意味着.active选择器被另一个（.customnav .nav > li）覆盖。

可能的解决方案 ：

.customnav .nav > li.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50;
    line-height: 20px;
}

或在属性中添加!important：

.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50 !important;
    line-height: 20px;
}