@media all and (min-width: 768px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 0;
    }

    .navbar .nav-item:hover .nav-link {
        color: #000;
    }

    .navbar .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .dropdown-menu.fade-up {
        top: 180%;
    }

    .navbar .nav-item:hover > .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 100%;
        transform: rotateX(0deg);
    }

    /* ===== 二層 dropdown CSS ===== */
    .nav-item .dropdown-submenu {
        position: relative;
    }
        /* 子選單預設隱藏，並定位在父項目的右側 */
        .nav-item .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -9px; /* 對齊上緣 */
            margin-left: 0;
        }
    /* 滑鼠移到父項目(li)上時顯示子選單 */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        -webkit-transition: .4s;
        transition: .4s;
        opacity: 1;
        visibility: visible;
        top: 0%;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
    /* 父項目右側加一個小箭頭提示還有下一層 */
    .dropdown-submenu > a::after {
        content: "";
        display: inline-block;
        margin-left: .5em;
        vertical-align: middle;
        border-top: .3em solid transparent;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
        float: right;
        margin-top: .5em;
    }
}

@media (min-width: 320px) and (max-width: 767.98px) {
    .dropdown-menu .dropdown-submenu > a::after {
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }

    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        display: none;
        position: static;
        float: none;
        width: 100%;
        padding: 0 20px;
        margin: 0;
        border: 0;
        box-shadow: none;
    }

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

@media (min-width: 992px) {
    .dropdown-menu .dropdown-toggle:after {
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }

    .dropdown-menu .dropdown-menu {
        margin-left: 0;
        margin-right: 0;
    }

    .dropdown-menu li {
        position: relative;
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover {
        background-color: #f1f1f1
    }

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