Change Color of a Link (Tab) that has Drop Down List on WP Nav Menu with CSS

Question

I am creating a website with Wordpress using the Twenty-Twelve theme and the main menu has a tab for 'Sales Items'.

When you hover on the tab it displays the different sales item categories in the drop down list, but I want to change the colour of the actual 'Sales Items' tab ONLY, not the colour of the links in the drop down list.

Each time I try and target just the Sales Items menu tab in CSS, it changes the colour of all the drop down list category items also.

Can anyone please tell me the correct CSS to use?

My website is http://www.thecolourmarket.com

Thank you!

Answer 1

you can either specify a class for sales items tag which will require editing the html then your html will look like this

<a class="targetsale" href="http://www.thecolourmarket.com/product-category/clothing/sale-items/">Sale Items</a>

then you can target this in css.

Or if you can't modify html just target the sale item and then target the sub items. In your case the css will look something similar to this

li#menu-item-579 a{color:red;}   //targets sale items
li#menu-item-580 a{color:black;}  //targets coats & jackets

Answer 2

To change only this particular "sales items" tab you can use the id #menu-item-579 or the class .menu-item-579 in your stylesheet. I'll use the ID here.

If you want to change the text colour, you can add:

#menu-item-579 a {
    color: #5bad13;
}

To change the background colour you can use:

#menu-item-579 {
    background-color: #5bad13;
}

When changing the background colour, you will notice that there is no padding left and right. So you probably want to add that too.

#menu-item-579 {
    background-color: #5bad13;
    padding: 0 13px;
}

However, you will then notice that the submenu is no longer positioned correctly. You'll need the id or class for this particular submenu. This may seem a bit of a problem, because it does not have a unique class. The solution there is to use the unique class/id of the main menu.

#menu-item-579 .sub-menu {
    margin-left: -13px;
}

I hope that is more or less what you have in mind. GL!