У меня есть следующий HTML:

<div class="menu">
    <a class="main-nav-item" href="home">home</a>
    <a class="main-nav-item-current" href="business">business</a>
    <a class="main-nav-item" href="about-me">about me</a>
</div>

В CSS я хочу установитьa:hover для этих пунктов меню, чтобы определенный цвет. Итак, я пишу:

.menu a:hover
{
    color:#DDD;
}

Но я хочу установить этоa:hover цвет только для тех<a> теги с классомОсновной-нав-деталь а неОсновной-нав-элемент токапотому что он имеет другой цвет и не должен меняться при наведении. Все<a> теги в пределахменю div должен изменить цвет при наведении, кроме того, который сток класс.

Как я могу сделать это с помощью CSS?

Я пробовал что-то вроде

.menu a:hover .main-nav-item
{
    color:#DDD;
}

думая, что только те, у которых есть класс main-nav-item, будут менять цвет при наведении, а не текущий. Но это не работает.