-1

Estou fazendo um menu dropdown, o menu aparece mas estou tendo problemas na exibição dos submenus. Alguém sabe como solucionar?

Segue o exemplo html e o CSS?

HTML

    <div class="nav-desktop">
        <ul class="js-nav-desktop-list nav-desktop-list" data-store="navigation" data-component="menu">
            <li class="js-desktop-nav-item js-nav-main-item nav-main-item nav-item-desktop nav-item"
                data-component="menu.item">
                <a class="nav-list-link selected keychainify-checked" href="/">Início</a>
            </li>
            <li class="js-desktop-nav-item js-item-subitems-desktop nav-item-desktop js-nav-main-item nav-dropdown nav-main-item  nav-item item-with-subitems"
                data-component="menu.item">
                <div class="nav-item-container">
                    <a class="nav-list-link position-relative keychainify-checked"
                        href="https://lojavirtual.com.br/livros/">Livros
                    </a>
                </div>
                <div class="js-desktop-dropdown nav-dropdown-content desktop-dropdown" style="max-height: 711px;">
                    <ul class="desktop-list-subitems list-subitems">
                        <li class="js-desktop-nav-item js-item-subitems-desktop nav-item-desktop  nav-item item-with-subitems"
                            data-component="menu.item">
                            <div class="nav-item-container">
                                <a class="nav-list-link position-relative keychainify-checked"
                                    href="https://lojavirtual.com.br/livros/aventura/">Aventura
                                </a>
                            </div>
                            <ul class=" list-subitems">
                                <li class="js-desktop-nav-item js-item-subitems-desktop nav-item-desktop  nav-item item-with-subitems"
                                    data-component="menu.item">
                                    <div class="nav-item-container">
                                        <a class="nav-list-link position-relative keychainify-checked"
                                            href="https://lojavirtual.com.br/livros/aventura/piratas/">Piratas
                                        </a>
                                    </div>
                                    <ul class=" list-subitems">
                                        <li class="js-desktop-nav-item js-item-subitems-desktop nav-item-desktop  nav-item item-with-subitems"
                                            data-component="menu.item">
                                            <div class="nav-item-container">
                                                <a class="nav-list-link position-relative keychainify-checked"
                                                    href="https://lojavirtual.com.br/livros/aventura/piratas/tesouro/">Tesouro
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                </div>
    </div>

CSS

body { font-family: Arial; }

/*ESTILOS GERAIS*/
.nav-desktop .nav-desktop-list {
    list-style: none;
    padding: 0;
}

.nav-desktop .nav-item-desktop {
    line-height: 3rem;
    position: relative;

}

.nav-desktop .nav-desktop-list {
    position: absolute;

}

.nav-desktop .nav-list-link {
    color: #ddd;
    display: block;
    padding: 0 2.5em;
    text-decoration: none;
    transition: .4s;

}

.nav-desktop .nav-list-link:hover {
    background: rgba(0, 0, 0, .5);
}


/*PRIMEIRO NÍVEL*/

.nav-desktop>.nav-desktop-list {
    background: #333;
    display: table;
    width: 100%;
}

.nav-desktop .nav-desktop-list>.nav-item-desktop {
    float: left;
}


/*SEGUNDO NÍVEL*/

.nav-desktop .nav-item-desktop .nav-item-desktop {
    background: #222;
    max-height: 0;
    overflow: hidden;
    transition: all .6s;
    width: 210px;
}

.nav-desktop .nav-item-desktop:hover .desktop-list-subitems,
.nav-desktop-list>.nav-item-desktop {
    max-height: 500px;
    overflow: visible;
}

.nav-desktop-list>.nav-item-desktop>.nav-desktop-list {
    top: 100%;

}

/*TERCEIRO NÍVEL*/

.nav-desktop .nav-desktop-list .nav-desktop-list .nav-desktop-list {
    left: 100%;
    top: 0;

}
1

0

Pesquise outras perguntas com a tag .