改变背景颜色悬停在不同的li a

Question

I got my navigation bar to work nicely but I need to have different colors in the backgrounds of each element. I tried giving them ID's and using it in CSS but it doesn't work. The "info day"should be firebrick(red) but "course"and "locations" should be two different colors. Can anyone one help me out?

 .menuUl { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-left: none; border-right: none; } .menuLi { float: left; border: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: firebrick; border-radius: 5px; } 

 <ul class="menuUl"> <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a> </li> <li class="menuLi" id="infoDay"><a href="">INFO DAY</a> </li> <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a> </li> </ul> 

Answer 1

Hope this helpful:

 .menuUl{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-left: none; border-right: none; } .menuLi{ float: left; border: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:nth-child(1) a:hover { background-color: blue; border-radius: 5px; } li:nth-child(2) a:hover { background-color: firebrick; border-radius: 5px; } li:nth-child(3) a:hover { background-color: black; border-radius: 5px; } 

 <ul class="menuUl"> <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li> <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li> <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li> </ul> 

Answer 2

I change their font-color for visibility in the snippet-demo but the main idea is to use them like this li#infoDay a:hover . Its specific to id's and changing their order wont affect the css

 .menuUl{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-left: none; border-right: none; } .menuLi{ float: left; border: none; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { border-radius: 5px; } li#courses a:hover{ background-color: blue; } li#locations a:hover{ background-color: green; } li#infoDay a:hover{ background-color: firebrick; } 

 <div> <ul class="menuUl"> <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li> <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li> <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li> </ul> </div>