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 colour on hover but don't know how to make each link different.

I figure its something to do with giving ids to each li tag?

<div id="navbar"> 
<ul> 
    <li id="link1"><a href="1.html">1</a></li>
    <li id="link2"><a href="2.html">2</a></li>
    <li id="link3"><a href="3.html">3</a></li> 
</ul> 
</div>

But then how do I create different styles for each of these ids in the css file? Below is what I tried

#navbar ul li a { 
    text-decoration: none; 
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
    color: #ffffff; 
    background-color: #000000; 
}


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

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

Help much appreciated!

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.

Answer 2

You have a bad selector. The li is superfluous.

#navbar #link1 a:hover { 
    color: #ffffff; 
    background-color: #C62222; 
    padding-top:15px;
    padding-bottom:15px;
}