html - 退出悬停后下拉菜单消失

问题描述

我在导航栏中和这些类别中列出了类别。我想像 Flipkart 网站一样显示下拉菜单。但是，当我将鼠标悬停在我的类别上时，它会显示下拉列表，但是一旦我将鼠标移到下拉列表上，我的下拉列表就会消失。

我以数组的形式从后端获取这些类别和下拉列表，这就是为什么我在我的 Html 文件中使用 ngFor 来显示我的类别和下拉列表的原因。有什么办法可以将悬停区域扩大到类别上。

我的主要目标是当我将鼠标悬停在我的下拉列表上时，它会显示，直到我的鼠标悬停在我的下拉列表上并在我从下拉列表中删除鼠标后消失。

我以数组形式从后端获得的类别是

男士

家居与家具

电子产品

我为这些类别获得的下拉列表-

男士鞋履、电子手表 - 智能手表、笔记本电脑

home.component.html 文件

           <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 文件

 .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 文件

 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
    }

  }

标签： htmlcssangular

html - 退出悬停后下拉菜单消失

问题描述

解决方案

推荐阅读