Creating A Navigation Bar Where Each Link Has A Different Hover Colour

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 ho

Solution 1:

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

#navbarullia:hover { 
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbarul#link1a:hover { 
    background-color: #C62222; 
}

#navbarul#link2a: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.

Solution 2:

You have a bad selector. The li is superfluous.

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

Solution 3:

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

#navbarulli#link1a:hover

You could further optimize your CSS like this:

#navbara { 
    text-decoration: none; 
    padding: 25px30px; /* shortcode for top/bottom - left/right */color: #ffffff; 
    background-color: #000000; 
}
#navbara:hover {  /* common hover styles */color: #ffffff; 
    padding:15px30px;
}

#link1a:hover { /* individual hover styles */background-color: #C62222; 
}

#link2a:hover {  /* individual hover styles */background-color: #28C622; 
}

Solution 4:

remove the space between li and #link2.

#navbarulli#link1a:hover { 
    color: #ffffff; 
    background-color: #C62222; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbarulli#link2a:hover { 
    color: #ffffff; 
    background-color: #28C622; 
    padding-top:15px;
    padding-bottom:15px;
}

Solution 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 method is:

#navbarulli#link1a:hover {
    ....

Alternately, you can use:

#navbarul#link1a:hover {
    ....

You may wish to combine the duplicated styles into a single directive:

#navbarullia:hover {
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

Then use only the changed style as needed:

#link1a:hover {
    background-color: #C62222;
}