Superposition of sidebar menu - html

Question

I have a menu item, having submenus, which I want to put in another menu item. That is as multilevel sidebar items. But there is overlapping as seen on the following image. How can it be fixed?
I expect XYZ, A,B, and C. to shift toward bottom.
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-swatchbook"></i>
<p>
Servis
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="serviceorder" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
Q
</p>
</a>
</li>
<li class="nav-item">
<a href="vehicleinservice" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
W
</p>
</a>
</li>
<li class="nav-item">
<a href="servicehistory" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
P
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="vehicleinservice" class="nav-link" #onclick="OnVehicleInServiceClick">
<i class="nav-icon fas fa-edit"></i>
<p>
Has-a-submenu-list
<span class="badge badge-info right">#vehicleInServiceCount.VehicleInServiceCount</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="takingintoservice" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>111111111r</p>
<span class="badge badge-info right">#vehicleInServiceCount.TakingIntoServiceCount</span>
</a>
</li>
<li class="nav-item">
<a href="inmaintenance" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>222222222</p>
<span class="badge badge-info right">#vehicleInServiceCount.InMaintenanceCount</span>
</a>
</li>
<li class="nav-item">
<a href="waitingsparepart" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>3333333333</p>
<span class="badge badge-info right">#vehicleInServiceCount.WaitingSparePartCount</span>
</a>
</li>
<li class="nav-item">
<a href="readytodeliver" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>4444444</p>
<span class="badge badge-info right">#vehicleInServiceCount.ReadyToDeliveryCount</span>
</a>
</li>
<li class="nav-item">
<a href="delivered" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>55555555</p>
<span class="badge badge-info right">#vehicleInServiceCount.DeliveredCount</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a href="customercard" class="nav-link">
<i class="nav-icon fas fa-user-tie"></i>
<p>
XYZ
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-layer-group"></i>
<p>
A
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="stockcard" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A1</p>
</a>
</li>
<li class="nav-item">
<a href="stocksale" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A2</p>
</a>
</li>
<li class="nav-item">
<a href="stockpurchase" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-receipt"></i>
<p>
B
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="invoiceinbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B1</p>
</a>
</li>
<li class="nav-item">
<a href="invoiceoutbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tools"></i>
<p>
C
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="safeaccount" class="nav-link">
<i class="fas fa-lira-sign nav-icon"></i>
<p>C1</p>
</a>
</li>
<li class="nav-item">
<a href="staff" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C2</p>
</a>
</li>
<li class="nav-item">
<a href="users" class="nav-link">
<i class="fas fa-users nav-icon"></i>
<p>C3</p>
</a>
</li>
<li class="nav-item">
<a href="firminfo" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C4</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->

Answer 1

The overlap happens as the li elements you expand are taken out of the content/document flow, while the other lis A B C etc. are not.
Technically you are not expanding them rather show/hiding them.
Here is the MDN article:
Position
You either would've to "put them back" into the content flow by using position: relative, for example, or by shifting the other elements downwards with a padding-top. The second solution wouldn't be my first choice, though.