Creating a navigation bar where each link has a different hover colour

Question

I\'d like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colo

Answer 1

What you're doing is on the right track, but don't repeat the CSS over and over:

#navbar ul li a:hover { 
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #28C622; 
}

As others have noted, you also need to either remove the space between the li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).

Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.