dynamic menu highlighting: text colour matching to page

You can achieve this with css. Each menu item has a unique class, like
“page-item-3” (3 is the id of the page).
Let’s say “Home” has the id “3”.
In your css you should add .page-item-3 a:hover {background-color:red}
For this to work your links in the main menu should be displayed as blocks.

For further help please provide a url of your website.

https://martinbagshaw.co.uk/

the home section would be as it is currently, Id like to do the same with white and grey for work and contact respectively. Here is my menu code, which probably has a lot of unnecessary stuff. Thanks for your help.

/* =Menu
————————————————————– */

#access {
background: #000000; /* Show a solid color for older browsers */
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 18px;
list-style: none;
margin: 0 0 0 -1.1em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #b3b3b3;
display: block;
line-height: 3.333em;
padding: 0 1.55em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #b3b3b30;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #000000; /* Show a solid color for older browsers */
color:#ff0033
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
color: #ff0033;
}

I sorted it with this piece of code, which can probably be abbreviated somehow:

}
#access .page-item-18 a:hover {color:#ffffff}
#access .page-item-22 a:hover {color:#4d4d4d}
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
color: #ff0033;
}
#access .current_page_item.page-item-18 > a,
#access .current_page_ancestor > a {
font-weight: bold;
color: #ffffff;
}
#access .current_page_item.page-item-22 > a,
#access .current_page_ancestor > a {
font-weight: bold;
color: #4d4d4d;
}