Keep parent menu highlighted while hovering over submenus

Question

I need to keep the parent parent menu item highlighted while hovering over its submenu items with level1 and 2. I am having problem because the link of level1 and level2 are different colors.

This never happens because seems like as soon as the mouse leaves the menu item and gets over the submenu, the browser styles it to its default style. Any help appreciated! Thanks a lot!

Follow my code in SCSS to study:

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:

INSTITUCIONAL
    
        INSTITUCIONAL
            
                Sobre nós
                Histórico
                Conselho de Administração
                Entidades Parceiras
                Estatuto Social
                Princípios Éticos e Código de Conduta
                Notícias
            
        
        COMITÊS
        ASSOCIADOS
    

EDUCACIONAL
    
        Sobre nós
        Conselho de Administração
        Histórico
    

CERTIFICAÇÃO E CREDENCIAMENTO
CONTATO

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

Rinho · Accepted Answer

You're looking for this:

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

Your submenu is inside the "li" tag, so you should take the hover over the "li" which is the parent of all the submenu content, and then style the menu link.

To maintain the structure of your code, it would look something like this:

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

Keep parent menu highlighted while hovering over submenus

Answers (1)

Related Questions