Nth-child Not Working In Ul

I have a simple

with an unordered list inside: I am trying to make a different color on hover for each child but instead it is selecting all of them (highlig

Solution 1:

All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:

navli:nth-child(1) a:hover {
  background: red;
}

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
navul {
  padding: 0;
  margin: 0;
}
navulli {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
navullia {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
navullia:hover {
  background: #000;
}
navli:nth-child(1) a:hover {
  background: red;
}
navli:nth-child(2) a:hover {
  background: #555;
}
navli:nth-child(3) a:hover {
  background: green;
}
navli:nth-child(4) a:hover {
  background: blue;
}

<nav><ul><li><ahref="#">HOME</a></li><li><ahref="#music">MUSIC</a></li><li><ahref="#livestream">LIVESTREAM</a></li><li><ahref="#links">LINKS</a></li><li><ahref="#about">ABOUT</a></li></ul></nav>

Solution 2:

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
navul {
  padding: 0;
  margin: 0;
}
navulli {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
navullia {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
navullia:hover {
  background: #000;
}
navli:nth-child(1) a:hover {
  background: green;
}

navli:nth-child(2) a:hover {
  background: blue;
}

navli:nth-child(3) a:hover {
  background: pink;
}

<nav><ul><li><ahref="#">HOME</a></li><li><ahref="#music">MUSIC</a></li><li><ahref="#livestream">LIVESTREAM</a></li><li><ahref="#links">LINKS</a></li><li><ahref="#about">ABOUT</a></li></ul></nav>