Держите родительское меню выделенным при наведении на подменю

Question

Мне нужно, чтобы родительский элемент родительского меню оставался выделенным при наведении курсора на его пункты подменю с уровнями 1 и 2. У меня возникли проблемы, поскольку ссылки уровня 1 и уровня 2 имеют разные цвета.

Этого никогда не происходит, потому что, как только мышь покидает элемент меню и переходит через подменю, браузер применяет его к стилю по умолчанию. Любая помощь приветствуется! Большое спасибо!

Следуйте моему коду в SCSS, чтобы учиться:

SCSS:

.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;

    li {
        margin-left: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;

        &:first-child {
            margin: 0;
        }

        &.current_page_item a {
            color: #00a7cf;
        }
    }
    a {
        color: #0a343a;
        font-size: 1.4em;
        letter-spacing: 0.01em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;

        &:hover {
            color: #00a7cf;
        }

    }

    & > li:hover > .sub-menu {
        display: block;
    }

    & > li > .sub-menu {
        position: absolute;
        top: 100%;
        left: -35px;
        padding: 40px 35px;
        background-color: #0b4e78;
        list-style: none;
        z-index: 1001;
        display: none;

        &::before {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 9px 10px 9px;
            border-color: transparent transparent #0b4e78 transparent;
            position: absolute;
            top: -10px;
            left: 80px;
        }

        & > li:hover > .sub-menu {
            display: block;
        }

        & > li > .sub-menu {
            position: absolute;
            left: 0;
            top: 0;
            padding: 40px 35px;
            background-color: #0b4e78;
            list-style: none;
            width: calc(100% + 100vw);
            min-height: 250px;
            padding-left: calc(100% + 50px);
            z-index: -1;
            display: none;

            &::before {
                content: '';
                height: calc(100% - 40px);
                position: absolute;
                background-color: rgba(255, 255, 255, .2);
                width: 1px;
                top: 0;
                transform: translateX(-50px);
            }

            a {
                font-size: 1.2em;
                font-weight: 100;
                color: #fff;

                &:hover {
                    color: #00a7cf;
                }

            }
        }

        li {
            margin: 0;
            position: unset;
        }

        a {
            color: #00a7cf;

            &:hover {
                color: #fff;
            }
        }
    }
}

HTML:

<ul id="menu-principal" class="menu"><li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item menu-item-has-children menu-item-71"><a href="http://localhost/ancord/">INSTITUCIONAL</a>
    <ul class="sub-menu">
        <li id="menu-item-80" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-80"><a href="#">INSTITUCIONAL</a>
            <ul class="sub-menu">
                <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://localhost/ancord/institucional/sobre-nos/">Sobre nós</a></li>
                <li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/ancord/institucional/historico/">Histórico</a></li>
                <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/ancord/institucional/conselho-de-administracao/">Conselho de Administração</a></li>
                <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://localhost/ancord/institucional/entidades-parceiras/">Entidades Parceiras</a></li>
                <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://localhost/ancord/institucional/estatuto-social/">Estatuto Social</a></li>
                <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://localhost/ancord/institucional/principios-eticos-e-codigo-de-conduta/">Princípios Éticos e Código de Conduta</a></li>
                <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://localhost/ancord/institucional/noticias/">Notícias</a></li>
            </ul>
        </li>
        <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://localhost/ancord/comites/">COMITÊS</a></li>
        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://localhost/ancord/associados/">ASSOCIADOS</a></li>
    </ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18"><a href="http://localhost/ancord/educacional/">EDUCACIONAL</a>
    <ul class="sub-menu">
        <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://localhost/ancord/institucional/sobre-nos/">Sobre nós</a></li>
        <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://localhost/ancord/institucional/conselho-de-administracao/">Conselho de Administração</a></li>
        <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://localhost/ancord/institucional/historico/">Histórico</a></li>
    </ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/ancord/certificacao-e-credenciamento/">CERTIFICAÇÃO E CREDENCIAMENTO</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/ancord/contato/">CONTATO</a>     </li>
</ul>

Codepen: https://codepen.io/marcoriesco/pen/jxVaEz

Answer 1

Вы ищете это:

.menu-item:hover > a {
  color: #00a7cf;
}
.sub-menu > li:hover > a {
  color: #fff;
}

Ваше подменю находится внутри тега "li", поэтому вам нужно навести указатель мыши на "li", который является родителем всего содержимого подменю, а затем стилизовать ссылку меню.

Чтобы сохранить структуру вашего кода, он должен выглядеть примерно так:

.menu {
  > li {
    &:hover {
      > a {
        color: #00a7cf;
      }
    }
    .sub-menu > li {
      &:hover > a {
        color: #fff;
      }
    }
  }
}