将底部边框添加到菜单 wordpress 中的活动链接答案

【问题标题】：Add bottom-border to active link in menu wordpress将底部边框添加到菜单 wordpress 中的活动链接
【发布时间】：2014-04-28 11:05:12
【问题描述】：

您好，我的网站是http://eeeonlinecourse.com/

我想使用 border-bottom 属性设置我的菜单栏的样式，如下所示：

header#top nav ul li a:hover{
    border-style: solid;
    border-bottom: thick solid #27CCC0;
}

header#top nav ul li a:active{
    border-style: solid;
    border-bottom: thick solid #27CCC0;
}

我已将这两行添加到我的子主题的样式表中。但是，它似乎不起作用。现在只有 hover 属性可以正常工作。我在悬停选择器之后添加了一个活动选择器，但是当菜单链接处于活动状态时，它仍然没有显示底部边框。我应该在样式表中添加什么？

【问题讨论】：

标签： css wordpress

【解决方案1】：

对吗？假设当用户单击“主页”时，会出现底部边框（在“主页”链接下）。如果是这样，只需添加 css（您的 css），如附图所示。 (.current_page_item) 是为 CURRENT (selected) li 添加的类。如果 home 被选中，那么会出现border-bottom。

 header#top nav .sf-menu li.current_page_item > a,
 header#top nav .sf-menu li.current-menu-item > a,
 header#top nav .sf-menu li.current_page_item > a
 {
  border-style: solid;
  border-bottom: thick solid #27CCC0;
 }

如果您想查看现场演示是否如您所愿，您可以转到“检查元素”并单击 1（在我的附件中）。然后，将 css 添加到 2（在我的附件中图片）。

还有，祝你好运..抱歉，如果这不是答案。

【讨论】：

【解决方案2】：

查看您给定的代码和参考站点，您似乎只对活动链接有问题，对吧？如果是这样，您可以简单地删除 a.active 因为没有活动类应用于链接。而是使用

header#top nav ul li.current_page_item > a { 边框样式：实心；边框底部：厚实#27CCC0； }

希望这能解决你的问题。

【讨论】：

【解决方案3】：

尝试给予：current-menu-item 是活动的菜单链接。

li.current-menu-item a:active{ border-style: solid;
    border-bottom: thick solid #27CCC0; }

希望这会有所帮助。

【讨论】：