Added code to change hover colour but it doesn't work, any ideas??

https://www.w3schools.com/css/css_link.asp

Thanks for the link alchymyth. I’ve corrected my code to that of the tutorial and added it to my style.css but it still doesn’t work. What am I doing wrong?

#top div.main-nav {
background: none;
display: block;
float: right;
font-size: 18px;
font-weight: bold;
margin: 18px 0 0;
padding: 4px 0;
text-align: left;
a:hover {color:#FF3399;}
}

any idea??? sorry but I can’t work out what i’m doing wrong…

one step back to the basics:
https://www.w3schools.com/css/

untested, and only corrected for syntax:

#top div.main-nav a: hover {
background: none;
display: block;
float: right;
font-size: 18px;
font-weight: bold;
margin: 18px 0 0;
padding: 4px 0;
text-align: left;
}

Your back to basics lessons helped me heaps on my ‘work’ page for sorting out margins/border/font colour. Thanks very much!

BUT, the a:hover still doesn’t work. I’ve copied and pasted your code above into my style.css and added the font colour so it now reads:

#top div.main-nav a: hover {
background: none;
display: block;
float: right;
font-size: 18px;
font-weight: bold;
margin: 18px 0 0;
padding: 4px 0;
text-align: left;
color: #FF3399;
}

I’ve also tried it with just:

#top div.main-nav a: hover {
color: #FF3399;
}

and I’ve cleared my cache. I’m at a loss to know what else to try. I know this is absolutely basic coding, but I cannot see why it’s not working for me! Please help!!

my mistake – there shouldn’t have been a space between a: and hover;

try:

#top div.main-nav a:hover {
background: none;
display: block;
float: right;
font-weight: bold;
text-align: left;
color: #FF3399;
}

also removed the margin, padding and font-size.

It works, thank you very much! I appreciate your patience!