CSS code for button hover not working

Hi there.

I’m having a problem with some CSS code. The code is meant to make the hover colours on the main menu alternate. But so far, it hasn’t worked as expected.

The first section works fine:

#access li a:hover

{
background-color:yellow;
}

…but this next piece of code has zero effect.

#access li a:hover:first-child:hover {
background-color:red;
}

#access li a:hover:nth-child:hover {
background-color:green;
}

#access li a:hover:nth-child:hover {
background-color:yellow;
}

…I’ve tried some variations of it, all to no avail.

If anybody could tell me what I’m doing wrong I’d be most grateful :).

I’m relatively new to programming CSS. I still don’t have a clear model of the interplay between the page, HTML and the style sheet.

I can usually hack something together from what I know and from what I can glean from online sources around the web and friends.

If someone could string together some code that does what I want it to and explain it for me, that would be superb.

The site is here – https://wildhoneysoundsystem.co.uk/
Thanks for your time