Как можно задать всем пунктам меню разную подсветку при наведении?

Надо задать каждому из пунктов меню свои цвета при наведении на них, немного не понимаю как можно такое сделать?

А просто к каждому элементу прописать hover не вариант?)

<ul class="nav">
<li
class="nav__item nav__item--green">Lorem ipsum.
<li
class="nav__item nav__item--yellow">Lorem ipsum.
<li
class="nav__item nav__item--red">Lorem ipsum.

В первом блоке обычный html к которому прикрепляем классы.

ul.nav li
{
display:inline;
padding:1em;
margin:1em;
cursor: pointer;
}

.
nav__item--green {
background-color: green;
}

.
nav__item--green:hover {
background-color: chartreuse;
}

.
nav__item--yellow {
background-color: yellow;
}

.
nav__item--yellow:hover {
background-color: darkgoldenrod;
}

.
nav__item--red {
background-color: red;
}

.
nav__item--red:hover {
background-color: tomato;
}

Ну и в css к каждому элементу индивидуально прописываем свой hover который меняет цвет на нужный вам, советую сразу согласовать пары цветов, так как так будет намного быстрее и легче)