CODEWITHSUNDEEP
css
charlie
charlie

Reputation: 481

CSS menu hover colors and background colors

i have this CSS for my menu:

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

How can i make the item color white?

i tried adding color:#FFFFFF; to #menu-product-categories li > a { but it is affecting the sub menu colors.

I want to make the items white and then the sub menu background colour #F35F25 and the sub menu items with white text and then on hover #F36F25 text and white background

Upvotes: 1

Views: 167

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

You can make your selectors more specific by including the sub-menu class before targeting the anchor link tag, eg:

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

Updated Fiddle:

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

Expand the snippet below for an example:

.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>

Upvotes: 0

alexvance
alexvance

Reputation: 1124

Just need to add another child selection > to your selector, making it #menu-product-categories > li > a { color: #FFFFFF; }. This limits the styling to affecting the first level menu items and not the submenus. See https://jsfiddle.net/6dyckmtj/1/

Upvotes: 1

Related Questions