Question

我的菜单中有这个CSS：

.menu-product-categories-container {
    display:block;
    width:100%;
    height:60px;
    background:#F36F25;
}
#menu-product-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align:center;
    height:100%;
    z-index: 0;
}
#menu-product-categories > li {
    display: inline-block;
    z-index:9999;
    position:relative;
    padding:21px 8px;
    text-decoration:none;
}
#menu-product-categories li > a {
    display: block;
}
#menu-product-categories > li:hover {
    background:#FFFFFF;
    color:#F36F25;
}
#menu-product-categories > li > a:hover {
    color:inherit;
}
#menu-product-categories ul.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display:none;
    width:200px;
    position:absolute;
    z-index:1;
    left:0;
    top:60px;
    background: #FFFFFF;
}
#menu-product-categories li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
    background: #FFFFFF;
}
#menu-product-categories ul.sub-menu li {
    color:#FFFFFF;
    padding:5px;
}
#menu-product-categories ul.sub-menu li:hover {
    color:#F36F25;
    background:#000000;
    float:none;
    padding:5px;
}

如何将项目颜色设为白色？

我尝试将color:#FFFFFF;添加到#menu-product-categories li > a {，但它会影响子菜单颜色。

我想将项目设为白色，然后是子菜单背景颜色#F35F25和带有白色文本的子菜单项，然后悬停＃F36F25文本和白色背景

Answer 1

只需将另一个子选择>添加到您的选择器，使其成为#menu-product-categories > li > a { color: #FFFFFF; }。这会将样式限制为影响第一级菜单项而不影响子菜单。见https://jsfiddle.net/6dyckmtj/1/

Answer 2

通过在定位锚链接标记之前包含子菜单类，您可以使选择器更具体，例如：

#menu-product-categories li .sub-menu a

更新小提琴：

https://jsfiddle.net/6dyckmtj/4/

展开下面的代码段以获取示例：

.menu-product-categories-container {
    display:block;
    width:100%;
    height:60px;
    background:#F36F25;
}
#menu-product-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align:center;
    height:100%;
    z-index: 0;
}
#menu-product-categories > li {
    display: inline-block;
    z-index:9999;
    position:relative;
    padding:21px 8px;
    text-decoration:none;
}
#menu-product-categories li > a {
    display: block;
}
#menu-product-categories > li:hover {
    background:#FFFFFF;
    color:#F36F25;
}
#menu-product-categories > li > a {
    color:#FFFFFF;
}
#menu-product-categories > li:hover > a {
    color:#F36F25;
}
#menu-product-categories ul.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display:none;
    width:200px;
    position:absolute;
    z-index:1;
    left:0;
    top:60px;
    background: #FFFFFF;
}
#menu-product-categories li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
    background: #F36F25;
}
#menu-product-categories ul.sub-menu li {
    color:#FFFFFF;
}
#menu-product-categories ul.sub-menu li:hover {
    color:#F36F25;
    background:#FFFFFF;
    float:none;
}
#menu-product-categories li .sub-menu a {
    background: #F35F25;
    color: white;
    padding: 10px;
    box-sizing: border-box;
}
a {
    transition: .7s;
}
#menu-product-categories li .sub-menu a:hover {
    background: white;
    color: #F36F25;
}

<div class="menu-product-categories-container">
<ul id="menu-product-categories" class="menu">
    <li id="menu-item-2933" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-2933"><a href="/shop/product-category/desk-phones/">Desk Phones</a></li>
    <li id="menu-item-2934" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2934"><a href="/shop/product-category/headsets/">Headsets</a></li>
    <li id="menu-item-2931" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2931"><a href="/shop/product-category/conference-phones/">Conference Phones</a></li>
    <li id="menu-item-2932" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2932"><a href="/shop/product-category/dect-phones/">Dect Phones</a></li>
    <li id="menu-item-2935" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2935"><a href="/shop/product-category/routers/">Routers</a></li>
    <li id="menu-item-2936" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2936"><a href="/shop/product-category/switches/">Switches</a>
        <ul class="sub-menu">
            <li><a href="#">Dropdown 1</a></li>
            <li><a href="#">Dropdown 2</a></li>
            <li><a href="#">Dropdown 3</a></li>
            <li><a href="#">Dropdown 4</a></li>
        </ul>
    </li>
    <li id="menu-item-2930" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2930"><a href="/shop/product-category/cctv/">CCTV</a></li>
</ul>
</div>

CSS菜单悬停颜色和背景颜色

2 个答案: