html - Zurb Foundation 更改顶栏颜色

Question

我无法将 Foundation 站点的顶部栏部分更改为不同的颜色。

我为此创建了一个自定义 style.css。

我可以更改大部分顶部栏的颜色，但不能更改右侧的下拉列表侧(我的左侧没有列表)。单击下拉菜单中的链接会更改导航栏的颜色，但顶部的导航栏组件除此之外不会发生变化(希望这有意义吗？)...

这是基本的 HTML:

<section class="top-bar-section">
        <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Sections</a>
          <ul class="dropdown">
            <li><a href="about.html">####</a></li>
            <li class="divider"></li>
            <li><a href="philosophy.html">####</a></li>
            <li class="divider"></li>
            <li><a href="beginning.html">####</a></li>
            <li class="divider"></li>
            <li><a href="#">#####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

        <li class="has-dropdown">
          <a href="#">Links</a>
          <ul class="dropdown">
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

      </ul>
    </section>

这是我尝试使用 style.css 更改它:

@charset "UTF-8";

.top-bar {
    background-color: #2D4DC7;
}


.top-bar-section ul {
    background-color: #2D4DC7;
}

.top-bar-section ul.right {
    background-color: #2D4DC7;
}


.top-bar-section li a:not(.button) {
    background-color: #2D4DC7;
}


.top-bar-section ul li.active > a {
   background-color: #2D4DC7;

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background-color: #2D4DC7;
}


.top-bar-section ul li > a {
    background-color: #2D4DC7;
}


.top-bar-section ul.dropdown li a:hover:not(.button) {
     background-color: #2D4DC7;
}


.top-bar-section ul.dropdown {
    background-color: #2D4DC7;
}


.top-bar-section .has-dropdown > a:after {
    background-color: #2D4DC7;
}

我很确定这只是我遇到问题的语法。我认为与“正确”类(class)有关？？？

有什么帮助吗？

非常感谢

Answer 1

我强烈建议您使用安装了 Firebug 的浏览器，例如 Firefox。

加载任何页面，点击 Tools > Web Developer > Inspector(或其等效的热键)，然后单击您的对象，HTML 代码检查器将引用控制正在生成的样式的 css 文件的确切行(或者直接样式，或计算样式)。

节省时间和理智。