Mam następujący kod 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>

W CSS chcę ustawića:hover dla tych elementów menu do określonego koloru. Więc piszę:

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

Ale chcę to ustawića:hover kolor tylko dla tych<a> tagi z klasąmain-nav-item a niemain-nav-item-current, ponieważ ma inny kolor i nie powinien się zmieniać po najechaniu. Wszystko<a> tagi wmenu div powinien zmienić kolor w dymku, z wyjątkiem koloru zobecny klasa.

Jak mogę to zrobić za pomocą CSS?

Próbowałem czegoś takiego

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

myśląc, że tylko te z klasą głównego elementu nawigacyjnego zmienią kolor na zawisie, a nie na bieżący. Ale to nie działa.