Dropdown: submenu não aparece

Front-end CSS
#1

Estou tentando fazer 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

/*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;

}