Cómo crear un menú desplegable dentro del menú desplegable usando bootstrap

Quiero crear un menú desplegable, pero no estoy seguro de que sea un menú desplegable o algo más porque soy nuevo en el entorno HTML.

Lo que quiero crear es

Cuando hice clic en Indian Spices, debe mostrar otro menú desplegable en su interior, y si hice clic en Pepper, debe mostrar otros dos elementos debajo.

Aquí cada opción debe aparecer debajo de ella es principal. Y el menú desplegable no debe tener los bordes a su alrededor. Necesito diseñar el menú desplegable de la misma manera que en la imagen. (Sin ningún borde)

He intentado algo aquí, pero sé que no es la forma correcta de diseño. @https: //stackblitz.com/edit/angular-a1deda? file = app% 2Fapp.component.html

Aquí estoy casi cerca de mi objetivo

https: //stackblitz.com/edit/angular-tjndwi? file = app% 2Fapp.component.html

¿Alguien puede guiarme para resolver esto ...

Respuestas a la pregunta(1)

Su respuesta a la pregunta