Create a navigation bar where each link has a different hover color

Question

I would like to make a black navigation bar for my site, and when you hover over the first link, it will turn orange, the second green, etc. I know how to change color on hover, but don’t know how to make each link different.

I suppose this has to do with providing identifiers 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 how do I create different styles for each of these identifiers in a css file? Below 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 rate!

Answer 1

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

 #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 li and your id, or simply delete li completely (since there is only one link1 , you do not have to tell the browser that it is li ).

Also, if you want, you can (and probably should) just these selectors to the end to #link1 a:hover and #link2 a:hover . This is a more stylish choice, but it helps keep your code clean.

Answer 2

You have a bad selector. li is redundant.

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

Answer 3

You need to remove the space between li and #link1 :

 #navbar ul li#link1 a:hover 

You can optimize your CSS as follows:

 #navbar a { text-decoration: none; padding: 25px 30px; /* shortcode for top/bottom - left/right */ color: #ffffff; background-color: #000000; } #navbar a:hover { /* common hover styles */ color: #ffffff; padding:15px 30px; } #link1 a:hover { /* individual hover styles */ background-color: #C62222; } #link2 a:hover { /* individual hover styles */ background-color: #28C622; } 

Answer 4

remove the space between li and #link2 .

 #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; } 

Answer 5

You were close, but the space between li and #linkX is causing problems. These are not two separate elements, so they should be combined. One possible way:

 #navbar ul li#link1 a:hover { .... 

Alternatively you can use:

 #navbar ul #link1 a:hover { .... 

You can combine duplicated styles into one directive:

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

Then use only the modified style:

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