Creando una barra de navegación donde cada enlace tiene un color diferente.

Me gustaría hacer una barra de navegación negra para mi sitio web, y cuando se desplaza sobre el primer enlace, se vuelve naranja, el segundo es verde, etc. Hacer cada enlace diferente.

Me imagino que es algo que ver con dar identificaciones a cada etiqueta li?

 

Pero entonces, ¿cómo creo diferentes estilos para cada uno de estos identificadores en el archivo css? A continuación es lo que intenté

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

Ayuda muy apreciada!

Lo que estás haciendo está en el camino correcto, pero no repitas el CSS una y otra vez:

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

Como han señalado otros, también debe eliminar el espacio entre el li y su ID, o simplemente eliminar el li completo (ya que solo hay un link1 , no necesariamente tiene que decirle al navegador que es un li ) .

Además, si lo desea, puede (y probablemente debería) simplemente usar esos selectores hasta #link1 a:hover y #link2 a:hover . Es más una elección estilística, pero ayuda a mantener su código limpio.

Tienes un mal selector. El li es superfluo.

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

Debe eliminar el espacio entre li y #link1 :

 #navbar ul li#link1 a:hover 

Podrías optimizar aún más tu CSS de esta manera:

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

eliminar el espacio entre li y #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; } 

Estabas cerca, pero el espacio entre li y #linkX está causando problemas. Estos no son dos elementos separados, por lo que deben combinarse. Un posible método es:

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

Alternativamente, puedes usar:

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

Es posible que desee combinar los estilos duplicados en una sola directiva:

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

Luego use solo el estilo cambiado según sea necesario:

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