Css 基础5：顶部酒吧-改变背景和悬停样式的移动菜单

我已经成功地更改了顶部栏，以查看我想要它的样子。但是当折叠时，移动菜单显示的颜色不一样（我想使用白色背景和简单的悬停，但背景是深灰色（应该是白色的），悬停是白色的，这是正确的），我看不到在哪里更改它们

以下是我目前掌握的情况：

HTML

SCSS

自定义CSS

 .nav-contain {
  margin-top: 30px;
  }
  .top-bar .top-bar-section li:hover > a {
    text-decoration: none;
    position: relative;
  }
  .top-bar .top-bar-section li:hover > a:after {
   content: '';

   width: 100%;
   position: absolute;
   left: 0;
   bottom: -2px;

   border-width: 0 0 1px;
   border-style: solid;
 }

这有点令人困惑（你可能会认为是ul），但我发现你可以改变背景颜色，因此：

.top-bar-section ul li>a {
  background-color:white;
}

---

使用SASS+基金会5的人，可以打开<代码>设置> SCSS并将颜色分配给<代码> $TopBar下拉BG< /Calp>

< P>这是完整的改变基础顶部颜色的备忘录（记住，重要的是，否则是不起作用的：

）

.top-bar {
    background: red;
}

.top-bar-section li a:not(.button) {
    background: blue !important;   
}

.top-bar-section li a:not(.button):hover {
    background: green !important;   
}

.top-bar-section ul li.active > a {
    background: gray !important;   
}

.top-bar-section ul li.active > a:hover {
    background: yellow !important;   
}

---

这改变了我的活动菜单颜色，但是在基础6中。

非常感谢，这正是我要找的。重要的是，这有帮助，但是你可以避免使用<代码>重要。<代码> >更具体：即<代码> .top bar。顶部栏部分La：不（.Button）{} /代码>等。

.top-bar {
    background: red;
}

.top-bar-section li a:not(.button) {
    background: blue !important;   
}

.top-bar-section li a:not(.button):hover {
    background: green !important;   
}

.top-bar-section ul li.active > a {
    background: gray !important;   
}

.top-bar-section ul li.active > a:hover {
    background: yellow !important;   
}

.dropdown.menu .is-active > a {
color: black; }