Question

我试图创建具有基础的响应式超级菜单，问题是我尝试了所有的东西，但我不能改变菜单右侧部分的颜色它仍然是黑色。我改变顶部的颜色-bar它现在是灰色的但是.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;}}

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

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

改变基础顶部栏右侧部分的CSS

1 个答案: