Tengo un problema de diseño, he buscado varios ejemplos pero no han dado resultado, no sé si tengo que editar el CSS que tiene por defecto Bootstrap, necesito generar un submenú.
Ejemplo:
En la imagen se muestra mi menú en el último item
que es registro de gastos, quiero que se desplieguen más opciones, ahí debe ir mi submenú pero me sale de esta manera, quizás es por las clases de Boostrap que no las estoy utilizando correctamente.
Este es mi código del item
vehículo, donde se despliega lo que se observa en la imagen:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-truck"></i>
Vehículos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="registro_vehiculos.php">Registrar Vehículo</a>
<a class="dropdown-item" href="inventario.php" >Inventario</a>
<a class="dropdown-item" href="agregar_combustible.php">Cargas de Combustible</a>
<a class="dropdown-item" href="checklist.php">Checklist Resguardo</a>
<a class="dropdown-item" href="checklist_revision.php">Checklist Revisión</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="recordatorios.php">Recordatorios</a>
<a class="dropdown-item" href="reporte_factura.php">Reportes por Factura</a>
<a class="dropdown-item" href="reporte_fecha.php">Reportes por Fecha</a>
<a class="dropdown-item" href="#">Registro de Gastos</a>
<ul class="navbar-nav mr-auto">
<li ><a href="#">Second level link</a></li>
<li ><a href="#">Second level link</a></li>
</ul>
</div>
</li>