Changing background color hovering over different 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>