change color for unused menu items

Hi there,

Do you mean the color change only happens when a link is hovered?

Try this CSS to set the other menu items link color to grey when one of the menu item is hovered.

.main-navigation ul:has(li:hover) li:not(:hover) a {
    color: grey;
}

Hi thanks for your reply but there is no change, when i hover over a menu item :-(. Maybe its because my question wasn`t exactly enough (sorry for that).
if you coult visit my site (it is juist at the beginnig of creating again :-) you could see what i mean. The menu items "Über Uns", "Aktuelles", "Ereignisse ...",... should change color, when i hover or click on one item (that items shouldn`t change its color) to grey (like fade out). Its for fokusing on the clicked item. when releasing, all colors should should change to origin again. Hope you know what I mean (sorry for my explanation :-) )

Hi there,

try this CSS:

.main-navigation .main-nav ul:hover li:not(:hover) {
    opacity: 0.5;
}

Hey David,
thanks for the css. It looks good. One Question remains. Is it possible, that the submenu keeps keeps its opacity?

Try:

.main-navigation .main-nav>ul:hover > li:not(:hover) {
    opacity: 0.5;
}

If that don't work, can you share a link to where i can see it ?

It works fine. Thanks a lot

Glad to hear that !