在子菜单中去掉border-bottom

Question

我的导航栏中的活动链接有一个border-bottom: 1px solid #424242，但我不想在下拉菜单中有border-bottom。正如您所看到的，当您将鼠标移到下拉菜单上时，链接会跳转。我一直在努力，但我找不到解决办法。也许我必须重构html。我糊涂了!任何帮助吗?这是我的小提琴。谢谢。

Answer 1

您需要从

中删除.top-bar-section ul li a:hover:

.top-bar-section ul li a:hover, .top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button):hover {
    color: #424242;
    background-color: #f3f4f6;
    background: #f3f4f6;
    border-bottom: 2px solid #424242;
}

编辑:

一个更好的解决方案是只在子列表中删除边框。

.top-bar-section ul ul a:hover {
    border-bottom: none;
}

这是处理跳转的一个可能的解决方案:

.top-bar-section > ul > li > a {
    border-bottom: 2px solid transparent;
}

以及接下来

Answer 2

从外观上看，它的子菜单项没有边框，它看起来好像可以工作。在你的小提琴中，你看不到sub，但是它们的代码在那里，所以:

.top-bar-section .has-dropdown li > a {
    border-bottom: none;
}