在菜单wordpress中将底边框添加到活动链接

Question

您的网站是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;
}

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

Answer 1

是不是？。让我们说当用户点击“Home”时，会出现下边框（在“Home”链接下）。如果是这样，只需添加css（你的css），如附图所示。 （.current_page_item）是为CURRENT（选定）li添加的类。如果选择了主页，则会出现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（在我的附件中）图像）。

而且，祝你好运。如果这不是答案，请抱歉。

Answer 2

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

  

标题#top nav ul li.current_page_item＆gt;一个 {     边框式：坚固;     border-bottom：thick solid＃27CCC0;    }

我希望这能解决你的问题。

Answer 3

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

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

希望这会有所帮助。