Notes

<li class="mt-2">
<svg id='Transaction_List_24' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<rect width='24' height='24' stroke='none' fill='#000000' opacity='0' />
</svg>
<button class="dropdown-btn">
<span style="font-weight: 500">Timesheet</span>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="/W2Payroll/GetW2PayrollTimesheetList" class="sub-menu-link">
<svg style="margin-right: 10px;" id='Todo_List_20' width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
<rect width='20' height='20' stroke='none' fill='#000000' opacity='0' />
</svg>W2 Payroll
</a>
<a href="/USA1099Payroll/Get1099USAPayrollTimesheetList" class="sub-menu-link">
<svg style="margin-right: 10px;" id='Todo_List_20' width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
<rect width='20' height='20' stroke='none' fill='#000000' opacity='0' />
</svg>1099-USA Payroll
</a>
<a href="/PR480Payroll/Get480PRPayrollTimesheetList" class="sub-menu-link">
<svg style="margin-right: 10px;" id='Todo_List_20' width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
<rect width='20' height='20' stroke='none' fill='#000000' opacity='0' />
</svg>480-PR Payroll
</a>
<a href="/ExternalConsultingHours/GetECHoursPayrollTimesheetList" class="sub-menu-link">
<svg style="margin-right: 10px;" id='Todo_List_20' width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
<rect width='20' height='20' stroke='none' fill='#000000' opacity='0' />
</svg>External Consulting (Hrs)
</a>
</div>
</li>

// Function to toggle dropdown open and close
document.querySelectorAll('.dropdown-btn').forEach(function(dropdownBtn) {
dropdownBtn.addEventListener('click', function() {
var dropdownContent = this.nextElementSibling;
dropdownContent.classList.toggle('active');
});
});

// Keep the dropdown open when clicking on a submenu
document.querySelectorAll('.sub-menu-link').forEach(function(link) {
link.addEventListener('click', function(event) {
// Prevent the dropdown from closing on click
event.stopPropagation();
});
});

/* Style to keep the dropdown open */
.dropdown-container.active {
display: block;
}

.dropdown-container {
display: none;
}

/* Add background color to active links */
li.active a, .sub-menu-link.active {
background-color: #f0f0f0;
}

<script>
$(document).ready(function() {
var currentUrl = window.location.pathname;

// Add 'active' class to the correct submenu link based on the URL
$('a[href="' + currentUrl + '"]').addClass('active');

// Ensure the parent dropdown of the active submenu stays open
$('a[href="' + currentUrl + '"]').closest('.dropdown-container').addClass('active');
});
</script>