Currently, I am working on a code for creating a multi-level dropdown menu. However, the issue is that the output is not displaying as expected, resembling the image above.
Here is my code:
HTML
<div *ngIf="options?.length >= 1" class="dropdown-menu">
<a *ngFor="let option of options"
class="dropdown-item d-flex"
(click)="selectOption(option)"
[ngStyle]="option.style">
{{ option.name || option.node_name || option?.product_name || option?.operatorName || option?.batch_number }}
<div *ngIf="option.sfgProducts.length >= 1" class="dropdown-submenu">
<a *ngFor="let suboption of option.sfgProducts"
class="dropdown-item d-flex">
{{ suboption.name }}
</a>
</div>
</a>
</div>
SCSS:
.dropdown-menu{
background: $onAccent;
color: $accent;
padding: 0.5rem;
border-radius: 8px;
max-height: 50vh;
overflow-y: auto;
left:-25px;
}
.dropdown-submenu {
background: $onAccent;
color: $accent;
padding: 0.5rem;
border-radius: 8px;
max-height: 50vh;
overflow-y: auto;
display: none;
margin-left: 25px;
}
.dropdown-menu > .dropdown-item:hover > .dropdown-submenu {
display: block;
}
.dropdown-item {
cursor: pointer;
min-height: 2rem;
display: flex;
align-items: center;
color: $accent;
border-radius: 8px;
}
Please refer to the image below:
https://i.sstatic.net/PI4AT.png
I want the dropdown-submenu to be positioned outside of the main dropdown 'a' element instead of being inside it. How can this issue be resolved?