css - 自定义导航栏 Zurb Foundation

Question

我正在尝试自定义基础中的顶部导航栏。

在我的样式表中我有这个:

.top-bar{
background: none;
color: #000;
}
.top-bar-section{
    background: none;
}

这是我的 html 标记:

<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name"><h1><a href="index.html">title</a></h1></li>
    </ul>
    <section class="top-bar-section">
    <ul class="right">
        <li><a href="#">item one</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</section>
</nav>
</div>
<div class="divider"></div>

它仅更改左侧顶部栏的背景颜色，而不更改顶部栏部分一侧的背景颜色。

我做错了什么？

谢谢!

Answer 1

.top-bar-section ul,
.top-bar-section ul li.active > a,
.top-bar-section ul li.active > a:hover,
.top-bar-section li a:not(.button),
.top-bar-section li a:not(.button):hover {
    background: none;   
}

Example