javascript – Color de fondo en el menu cuando un menu desplegable está activo

Estoy intentando simular como si el menú principal estuviera conectado al menú desplegable mientras está activo por medio del color de fondo.

Cómo puedo cambiar el color de fondo de “Catalogo” mientras el menú desplegable esté activo?

He sido capaz de cambiar el color de fondo en el menú cuando paso el mouse por encima usando este código:

.site-nav__link--button:focus, .site-nav__link--button:hover {
  background-color: #B8A899;}

Esta es mi página.

Soy demasiado nuevo en CSS/HTML, y no tengo la menor idea cual es el código mínimo necesario para crear un ejemplo mínimo funcional.

Por favor, alguien puede guiarme en la dirección correcta? Qué código tendría que modificar para obtener el efecto deseado?

Este es el efecto que quiero obtener, y quiero que el color de fondo en “Catálogo” se mantenga cuando muevo el mouse por el menú desplegable:

enter image description here