Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second dropdown button still displays the first submenu items instead of the second ones. Attempted to group each button using btn-group, but this breaks the buttons and causes the menu to disappear when clicked. Any advice would be appreciated. Thank you.
<nav class="navbar navbar-expand-md Nav-colors">
<a class="navbar-brand" href="<?php echo site_url(); ?>">
<img src="<?php echo assetUrl('images'); ?>ups_logo.png" alt="Brand Logo">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-text Nav-colors">Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="labourPlanningDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Labour Planning
</a>
<div class="dropdown-menu" aria-labelledby="labourPlanningDropdown">
<button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="reportsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Reports
</button>
<div class="dropdown-menu Nav-submenu-colors" aria-labelledby="reportsDropdown">
<a class="dropdown-item" href="#">Supervisor Daily Snapshot</a>
<a class="dropdown-item" href="#">Manager Daily Snapshot</a>
<a class="dropdown-item" href="#">Employee Productivity</a>
<a class="dropdown-item" href="#">Metric Export</a>
<a class="dropdown-item" href="#">Facility Hours/FTE</a>
<a class="dropdown-item" href="#">Trend Graphs</a>
<a class="dropdown-item" href="#">Monthly YoY Graphs</a>
</div>
<a class="dropdown-item" href="<?php echo site_url('facilityperformance'); ?>">Facility Performance</a>
<a class="dropdown-item" href="<?php echo site_url('weeklyexcesshours'); ?>">Weekly Excess Hours</a>
<a class="dropdown-item" href="<?php echo site_url('targetmar'); ?>">Target MAR</a>
<a class="dropdown-item" href="<?php echo site_url('unitofmeasure'); ?>">Unit of Measure</a>
<a class="dropdown-item" href="<?php echo site_url('monthlyplanforecast'); ?>">Monthly Plan/Forecast</a>
<button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="viewsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Views
</button>
<div class="dropdown-menu Nav-submenu-colors" aria-labelledby="viewsDropdown">
<a class="dropdown-item" href="#">3 Week View</a>
<a class="dropdown-item" href="#">1 Month View</a>
</div>
<a class="dropdown-item" href="<?php echo site_url('manualmetricinput'); ?>">Manual Metric Input</a>
<a class="dropdown-item" href="<?php echo site_url('clientimport'); ?>">Client Import</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="<?php echo site_url('employeemapping'); ?>">Employee Mapping</a>
<a class="dropdown-item" href="<?php echo site_url('activityowners'); ?>">Activity Owners</a>
<a class="dropdown-item" href="<?php echo site_url('planimport'); ?>">Plan Import</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Forecast</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Supervisor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Admin</a>
</li>
</ul>
</div>
<span class="navbar-text text-right">Logged in: <?php echo $ADID; ?></span>
</nav>