Untitled

<nav class="navbar d-flex p-0 ">
    <ul class="d-flex align-items-center m-0 p-0">
        <li class=""><a class="scrollto active" href="#hero"> Home </a></li>
        <li class=""><a class="scrollto" href="#about"> About </a></li>
        <li class=""><a class="scrollto" href="#feature"> Features </a></li>
        <li class=""><a class="scrollto" href="#gallery"> Gallery </a></li>
        <li class=""><a class="scrollto" href="#team"> Team </a></li>
        <li class=""><a class="scrollto" href="#price"> Pricing </a></li>
        <li class="dropdown"><a href="#">
                Dropdown <i class="bi bi-chevron-down fs-6 fw-bold m-lg-1 text-white"></i> </a>
            <ul class="rounded-1 p-0 py-1">
                <li><a href="#">Drop Down 1</a></li>
                <li class="dropdown"><a href="#">
                        Drop Down Deep <i class="bi bi-chevron-down fs-6 fw-bold m-lg-1"></i></a>
                    <ul class="rounded-1 p-0 py-1">
                        <li><a href="#">Drop down</a></li>
                        <li><a href="#">Drop down</a></li>
                        <li><a href="#">Drop down</a></li>
                        <li><a href="#">Drop down</a></li>
                        <li><a href="#">Drop down</a></li>
                    </ul>
                </li>
                <li><a href="#">Drop Down 1</a></li>
                <li><a href="#">Drop Down 1</a></li>
            </ul>
        </li>
        <li class=""><a class="scrollto" href="#contact"> Contact </a></li>
    </ul>
    <i class="bi bi-list mobile-nav-toggle text-white fs-3"></i>

</nav>





============ CSS ===============================
.navbar ul {
    list-style: none;
}

.navbar li {
    position: relative;
}

.navbar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: rgba(255, 255, 255, 0.7);
    /* transition: 0.3s; */
}

.navbar a:hover,
.navbar .active {
    color: #fff;
}

.navbar>ul>li>a:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 2px;
    bottom: 4px;
    background-color: #1acc8d;
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
}

.navbar li:hover>a:before,
.navbar .active:before  {
    visibility: visible;
    width: 25px;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    background: #fff;
    top: 100%;
    /* top: calc(100% + 30px); */

    left: 30px;
    /* width: 200px; */
    visibility: hidden;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    color: #01036f;
    padding: 10px 20px;
    font-size: 14px;
}

.navbar .dropdown li:hover>a,
.navbar .dropdown .dropdown li:hover a {
    color: #1acc8d;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: -100%;
}

.navbar .dropdown:hover>ul {
    visibility: visible;
}

.mobile-nav-toggle {
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

@media (max-width: 991px) {
    .navbar a:hover,
    .navbar .active {
        color: #18d26e;
    }
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none !important;
    }
}

.navbar-mobile {

    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(1, 3, 91, 0.9);
    position: fixed;
    overflow: hidden;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
}

.navbar-mobile ul {
    display: block !important;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    border-radius: 8px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile>ul>li>a:before {
    left: 20px;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    color: #0205a1;
}

.navbar-mobile .dropdown ul,
.navbar-mobile .dropdown .dropdown ul {
    position: static;
    display: none !important;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile li:hover>a {
    color: #1acc8d;
}

.navbar-mobile .dropdown>.dropdown-active,
.navbar-mobile .dropdown .dropdown>.dropdown-active {
    display: block !important;
}



==================JS=======================
$(".mobile-nav-toggle").on("click", function () {
        $("#header nav").toggleClass("navbar-mobile");
    });

    $('.navbar .dropdown').on('click', function (e) {
        if ($('.navbar').hasClass('navbar-mobile')) {
            // alert('Hihihiihi');
            //   e.preventDefault();
            //   $(this).next().toggleClass('dropdown-active');
            $('.dropdown ul').first().toggleClass('dropdown-active');
            $('.navbar .dropdown .dropdown').on('click', function (e) {
                $('.dropdown .dropdown ul').toggleClass('dropdown-active');
            })
        }
    }
    );



/**
 * Navbar links active state on scroll
 */
    let navbarlinks = $('.navbar .scrollto');
    const navbarlinksActive = () => {
        let position = $(window).scrollTop() + 200;
        navbarlinks.each(function () {
            if (!this.hash) return;
            let section = $(this.hash); //#
            if (!section.length) return;
            // console.log(section.offset().top);
            if (
                position >= section.offset().top &&
                position <= section.offset().top + section.outerHeight()
            ) {
                $('.navbar .scrollto').first().removeClass('active');
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        });
    };
    $(window).on('load', navbarlinksActive);
    onscroll(document, navbarlinksActive);