charlie charlie - 2 months ago 5
CSS Question

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

Answer

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/

Comments