更改基础顶部栏右侧部分的 CSS答案

【问题标题】：changing CSS of right part of top-bar-section in foundation更改基础顶部栏右侧部分的 CSS
【发布时间】：2014-12-17 15:13:10
【问题描述】：

我正在尝试使用基础创建响应式大型菜单，问题是我尝试了所有事情，但我无法更改菜单右侧部分的颜色，它仍然是黑色。我更改了顶部栏的颜色现在它是灰色的，但 .top-bar-section 没有改变。这是我的 CSS 代码：

    .top-bar{
    background-color:gray !important;
}

    .top-bar .expanded{
        background-color:gray !important;

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

    .mega-menu {
        border-top: 1px solid #222;
    }
    .mega-menu .top-bar-section .right> li{
        background-color:blue !important;
    }
        /* Change tab hover state to same colour as content background */
        .mega-menu .top-bar .top-bar-section li:hover > a {
            color: #222;
            background: #FFF;
        }

我想改变顶栏部分的背景颜色，但它没有改变这是我的代码的一部分：

<div class="mega-menu">
        <nav class="top-bar" data-topbar="">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Tojjar</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>
            <section class="top-bar-section">

                <ul class="right">
                    <li><a><strong class="fontstyle">درباره ما</strong></a></li>
                    <li><a><strong class="fontstyle">راهنما</strong></a></li>
                    <li><a><strong class="fontstyle">تماس با ما</strong></a></li>

谢谢。

【问题讨论】：

您可以简单地更改顶栏设置 github.com/zurb/foundation/blob/master/scss/foundation/… 并从 SASS 构建 Foundation

标签： html css zurb-foundation

【解决方案1】：

在我最近安装的 FoundationPress 中，我认为是以下两个属性：

.top-bar-section li.active:not(.has-form) a:not(.button) {background:$color !important;}

还有

@media only screen and (min-width: 64.063em){.top-bar-section li:not(.has-form) a:not(.button):hover {background:$color !important;}}

而那个侧块与我想要的颜色相匹配。

（顶栏颜色没有改变这两个设置）

【讨论】：