Надо задать каждому из пунктов меню свои цвета при наведении на них, немного не понимаю как можно такое сделать?
А просто к каждому элементу прописать 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 который меняет цвет на нужный вам, советую сразу согласовать пары цветов, так как так будет намного быстрее и легче)