自定义导航栏Zurb基金会

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