If i am on the home page and hover over Home, only that text changes color, however if i hover over Blog or About, Both the tab I am hovering over and the Home tab change colour.

Similarly, if i am on the blog page and hover over Blog, only that tab changes color. However, if i hover over Home or About, both the tab I am hovering over and the blog tab change color.

so it appears that the tab for the current page I am on and the tab I am hovering over both change colour.

I hope this makes sense. I apologise for any confusion I may cause

Something hard to explain can be easily resolved by a live link to the page in question. Then you just have to tell us to hover over one thing and see what happens at another.

When you hover over an element, anything else matching any of the selectors will also have the same rule applied. For whatever reason, when you hover over a menu item, the other item changing colour is also matching a selector in the group.

The solution is to adjust things so undesirable colour changing does not happen. Changing the class of the problem element will do it, but probably break other menu functions. You can alter the selectors so they are more specific so that undesirable elements will not match. This too can break other menu functions. It can be a frustrating process.

Make use of your browser’s developer tools. Use the CSS analyser to try different selector variations until you get the results you want. Test thoroughly to ensure your changes don’t have adverse impacts elsewhere. Once you’re satisfied, copy your changes to the appropriate locations in the CSS files.

By providing a live link, other’s can try the same process and perhaps offer a solution.