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

定制导航栏Zurb基金会

1 个答案: