Dropdown vanishes as soon as it comes out of hover - html

Question

I've made a list of categories in the navbar and in these categories. I want to show a dropdown just like a Flipkart website. But when I'm hovering over my categories it shows dropdown but as soon as I move my mouse over the dropdown list my dropdown vanishes.
I'm getting these categories and dropdowns from backend in the form of an array that's why I use ngFor in my Html file to display my categories and dropdown list. Is there any way to expand the hover area over the categories.
My main aim is when I mouse over my dropdown it shows till my mouse is over my dropdown and vanishes after I remove my mouse from the dropdown list.
The categories that I'm getting from backend in the form of an array are
Men
Home&Furniture
Electronics
The dropdown I am getting for these categories-
For Men-Shoes, Watches
For Electronics - Smartwatches, Laptops
home.component.html File
<div class="col-7">
<ul class="row list">
<ng-container *ngFor='let item of menus'>
<li class="px-3 Menu" (mouseover)='overMenu(item.name)'
(mouseout)='leaveMenu(item.name)' >{{item.name}}
<img class="caret ml-1" src="../../../assets/angle-arrow-down.png">
<div class="sub-menu">
<ul class="list2" *ngIf="item.name === 'Men' && flag">
<ng-container *ngFor='let i of arr'>
<li class="text-center">{{i.mensubcat}}</li>
</ng-container>
</ul>
<ul class="list2" *ngIf="item.name === 'Home&Furniture' && flag2">
<ng-container *ngFor='let i of arr'>
<li class="text-center">{{i.mensubcat}}</li>
</ng-container>
</ul>
<ul class="list2" *ngIf="item.name === 'Electronics' && flag2">
<ng-container *ngFor='let i of arr'>
<li class="text-center">{{i.esubcat}}</li>
</ng-container>
</ul>
</div>
</li>
</ng-container>
</ul>
</div>
home.component.css File
.list {
display: flex;
list-style: none;
justify-content: flex-start;
align-items: center;
position: relative;
}
.Menu
{
padding: 9px 20px;
}
.Menu:hover
{
color: rgb(9, 128, 240);
}
.Menu:hover > .caret {
color: rgb(9, 128, 240);
transform: rotate(180deg);
transition: 0.2s;
}
.list2 {
list-style: none;
position: absolute;
line-height: 37px;
display: block;
z-index: 4;
padding: 10px;
background-color: #e1e2e5e3;
border-radius: 5px;
width: 20%;
color:black;
/* padding-left: 0; */
}
home.component.ts File
overMenu(name){
if(name === "Men"){
this.flag = true
}
else if(name === 'Electronics'){
this.flag2 = true
}
}
leaveMenu(name) {
if(name === 'Men'){
this.flag = false
}
else if(name === 'Electronics'){
this.flag2 = false
}
}

Answer 1

I tried with mouseleave instead of mouseout and it did work.
here is the stackblitz i tried