Bootstrap导航栏悬停样式 - 如何避免CSS特异性

Question

我正在努力定制Boostrap导航栏组件的外观，并且在导航栏项的悬停状态基于类名实现工作时遇到问题。目前我不得不在我的选择器中使用一个元素，我理解我不应该这样做（CSS特异性？）

以下是我拥有导航栏项目的代码段：

"|"

我的css有效：

<li class="main-menu__dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Management <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a>Overview</a><li>
  </ul>
</li>

但是我希望我可以使用下面的代码：

.main-menu__dropdown.active,
li.main-menu__dropdown > a:hover
 {
  background-color: $navbar-item-highlight;

}

这对我来说不起作用，我使用的变量是蓝色阴影，但我得到默认的引导程序，白色突出显示。

我是正确使用选择器的初学者，所以毫无疑问我在这里误解了一些东西！

任何人都可以帮助我吗？感谢