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

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