/* parent */
.nav-item,
.dropdown-submenu {
    position: relative;
}

/* submenu level 1 */
.nav-item > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    z-index: 999;
}

/* tampil level 1 */
.nav-item:hover > .sub-menu {
    display: block;
}

/* submenu level 2 */
.dropdown-submenu > .sub-menu {
    display: none;
    position: absolute;

    /* INI YANG PENTING */
    top: 0;
    left: 100%;

    min-width: 220px;
    background: #fff;
    z-index: 999;
}

/* tampil level 2 */
.dropdown-submenu:hover > .sub-menu {
    display: block;
}

.dropdown-submenu > .sub-menu {
    left: 100% !important;
    top: 0 !important;
}

/* DESKTOP */
@media (min-width: 992px) {

    .dropdown-submenu > a::after {
        content: "›";
        float: right;
    }

    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu > .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
    }

    .dropdown-submenu:hover > .sub-menu {
        display: block;
    }

}

/* MOBILE */
@media (max-width: 991px) {

    .dropdown-submenu > .sub-menu {

        position: static !important;

        left: 0 !important;
        top: 0 !important;

        width: 100%;
        padding-left: 15px;
    }

    .sub-menu {
        min-width: 100% !important;
    }

}