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
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.
You need to remove the space between li
and #link1
:
#navbar ul li#link1 a:hover
You could further optimize your CSS like this:
#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;
}
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;
}
You have a bad selector. The li
is superfluous.
#navbar #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
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:
#navbar ul li#link1 a:hover {
....
Alternately, you can use:
#navbar ul #link1 a:hover {
....
You may wish to combine the duplicated styles into a single directive:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
Then use only the changed style as needed:
#link1 a:hover {
background-color: #C62222;
}