Dropdown vanishes as soon as it comes out of hover

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