Accordion Nested in bootstrap - Ul li a - Menu sub menu - Navbar

Nested with four nested

  <div class="accordion" id="accordionMenu">

        <div class="accordion-item">

            <h2 class="accordion-header " id="headingMonthlyReports">

                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthlyReports" aria-expanded="false" aria-controls="collapseMonthlyReports">A. Monthly Reports</button>

            </h2>

            <div id="collapseMonthlyReports" class="accordion-collapse collapse" >

                <div class="accordion-body">

                    <div class="accordion-item">

                        <div class="accordion-body">

                            <a href="../CourtApplicationInitialDetails.aspx">1. Monthly Performance Report-I (MPR-I)</a>

                        </div>

                    </div>

                    <!-- Main Monthly Performance Report I-->

                    <div class="accordion-item">

                        <h2 class="accordion-header" id="headingMPR2">

                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMPR2" aria-expanded="false" aria-controls="collapseMPR2">2. Monthly Performance Report - II (MPR-II)</button>

                        </h2>

                        <div id="collapseMPR2" class="accordion-collapse collapse" aria-labelledby="collapseMPR2">

                            <div class="accordion-body">

                                <div class="accordion-item">

                                    <h2 class="accordion-header" id="headingComplaintSIRRA">

                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComplaintSIRRA" aria-expanded="false" aria-controls="collapseComplaintSIRRA">i. Complaint/SIR/RA:</button>

                                    </h2>

                                    <div id="collapseComplaintSIRRA" class="accordion-collapse collapse" aria-labelledby="collapseComplaintSIRRA">

                                        <div class="accordion-body">

                                            <div><a href="../CourtApplicationInitialDetails.aspx">a) SIR\Comp\FI\Dormant - Statistics</a></div> 

                                            <div><a href="../CourtApplicationInitialDetails.aspx">b) SIR - Details</a></div>

                                            <div><a href="../CourtApplicationInitialDetails.aspx">c) Complaint - Details</a></div>

                                        </div>

                                    </div>

                                </div>

                                

                            </div>

                        </div>

                    </div>

                   

                </div>

            </div>

        </div>

       

    </div>

 https://www.codeply.com/p/zGN9Vrf3Y3

https://www.codeply.com/go/h5WTUsd59R/bootstrap-4-nested-accordion