修复边框底部菜单 [英] Fix border-bottom menu

问题描述

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

这是一个链接，您可以转到其中一个在线代码编辑器，以便您可以向我发送更新的链接与正确的代码。

That is a link that takes you to one of those online code editors, so that you can send me the updated link with the correct code.

我的问题是，以及活动页面是红色，它的边框底部需要是红色。

The issue I have is that, as well as the "Active" page being in red, the border-bottom of it needs to be red too. And the rest of the border-bottoms need to be green.

我尝试使用

.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！

But that does not work. It makes ALL of the border-bottoms grey. Please advise, please check the jsfiddle link and update the code there and send me the updated link. You can see the full HTML and CSS over there!

推荐答案

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

Your .active selector is less precise than .customnav .nav > li, which mean the .active selector is overridden by the other one (.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;
}

这篇关于修复边框底部菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！