html - 在基础中更改顶部栏部分右侧的 CSS

Question

我想用基础创建响应式大型菜单，问题是我尝试了所有方法，但我无法更改菜单右侧部分的颜色，它仍然是黑色。我更改了顶部栏的颜色它现在是灰色的，但 .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>

谢谢。

Answer 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;}}   

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

(顶栏颜色没有改变这两个设置)