Adding CSS rules to a menu for WooCommerce Product Categories, including styling sub categories. Problem I kept having was the current selector was highlighting the sub menu options too. To get this to work it is all about the order of your CSS rules. Make sure you add the main categories first in your CSS, then add the rules for the Sub Categories… Job Done!
#pageLeft ul {
border-top: 1px solid #c4c3c3;
margin-bottom: 30px;
}
#pageLeft li a {
display: block;
border-bottom: 1px solid #c4c3c3;
padding: 5px 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition-property: background-color;
transition-duration: .3s;
transition-timing-function: ease-out;
color: #000;
}
#pageLeft li a:hover {
background-color: #dfedf7;
}
#pageLeft li.current-menu-item a {
color: #fff;
background: #3371a0;
}
/* Sub Menu */
#pageLeft ul.sub-menu {
border-top: 0px solid #c4c3c3;
margin-bottom: 0;
}
#pageLeft ul.sub-menu li a {
font-size: .8em;
color: #000;
padding-left: 20px;
background-color: #fff;
}
#pageLeft ul.sub-menu li a:hover {
background-color: #dfedf7;
}
#pageLeft ul.sub-menu .current-menu-item a
{
color: #fff;
background: #3371a0;
}
