Multi Level Navigation Menu with Search Filter

<input id="Search" type="text" />
<div class="menu">
    <ul>
        <li class="active">
            <a href="" style="display: list-item;">
                <i class="zmdi zmdi-home"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>CRM</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Accounts</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Contacts</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Accounts Listing Test</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Projects</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Custom Report</span>
                    </a>
                </li>

            </ul>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>Leads</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Unqualified Leads</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>In-process Leads</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Qualified Leads</span>
                    </a>
                </li>
            </ul>
        </li>

        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>Tools</span>
            </a>





            <ul class="ml-menu core_ml-menu">

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Approval</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>SO PO Approval</span>
                            </a>
                        </li>



                    </ul>
                </li>

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>CC Program</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile CC Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve CC Charges</span>
                            </a>
                        </li>

                    </ul>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Calendar</span>
                    </a>
                </li>

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <i class="zmdi zmdi-assignment"></i>
                        <span>Art Request</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>My Art Request</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Closed Art Requests</span>
                            </a>
                        </li>

                    </ul>
                </li>
                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>UPS</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">


                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile UPS Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile FedEx Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile Sfexpress Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve UPS Charges</span>
                            </a>
                        </li>
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve FedEx Charges</span>
                            </a>
                        </li>
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve Sfexpress Charges</span>
                            </a>
                        </li>
                    </ul>
                </li>



                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Tasks/Events</span>
                    </a>
                </li>
                <!-- Bug Tracker Navaigation link added in tools-->
                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Bug Tracker</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>My Issues Lists</span>
                            </a>
                        </li>
                    </ul>
                </li>


                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Legal</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Terms and Conditions</span>
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>User Management</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Departments</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Categories</span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Modules</span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Permission Pages </span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Department Permission </span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Subsidiary</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Users</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Teams</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Add Cards</span>
                    </a>
                </li>
            </ul>
        </li>


    </ul>
</div>

<script>
document.querySelector("#Search").addEventListener("keyup", function(e) {
  var filter = this.value.toLowerCase();
  document.querySelectorAll(".menu ul > li").forEach(function(li) {
    if (filter == "") {
       li.style.display = "list-item";
    } else if (!li.textContent.toLowerCase().match(filter)) {
      li.style.display = "none";
    } else {
      li.style.display = "list-item";
    }
  });
});
2
</script>


Demo