Navbar Hover DropDown Expand - Angular

Question

我的 Angular 代码库中有一个 bootstrap 4 导航栏，当我将鼠标悬停在不确定如何实现的菜单项上时，我希望它的导航栏下拉菜单展开。我将整个晚上都与许多选项捆绑在一起，但找不到可以实现这一目标的东西。

我有我的 HTML、TS 和 CSS 供您参考。

我的 HTML：

<nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
</nav>

我的 TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-top-menu',
  templateUrl: './top-menu.component.html',
  styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {

  menus : any = [
    {
      
        heading: "MENU1",
        options: 
        [
          {name: "GOOGLE",link: "https://google.com/", order: 1},
          {name: "GitHub",link: "https://github.com", order: 2},
        ]
      
    }
  ];
  
  isDropdownOpen: boolean = false;
  constructor() { }

  ngOnInit(): void {
  }

}

我的 CSS：

.navbar{
    padding:0px;
}
.nav-border {
    border-bottom:1px solid #ccc;
}
li { cursor: pointer; }

li:hover{
    background-color: black;
}

a {
    color: black;
}

.navbar-nav {
    padding: .9rem 0 0;
}

.nav-link:hover {color:white;}

.widthd{
    width: 100%;
}

菜单截图：

Answer 1

只需复制粘贴此代码 sn-p。

<nav class="navbar navbar-expand-md">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item" *ngFor="let menu of menus">{{menu}}
        <ul class="submenu">
          <li *ngFor="let option of menu.options" [routerLink]="option.link">{{option}}</li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

.navbar {
  padding: 0px 70px 0 70px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  height: 50px;
  background: #fff !important;
}

.navbar-nav .nav-item {
  line-height: 50px;
  margin: 0px 15px;
  font-size: 14px;
  cursor: pointer;
}

.navbar-nav .nav-item a {
  text-decoration: none;
  color: #000;
}

.navbar-nav .nav-item .submenu {
  visibility: hidden;
  opacity: 0;
  list-style: none;
  width: 200px;
  position: absolute;
  background: #fff;
  z-index: 99;
  border-top: 2px solid #000080;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform: translateY(25px);
  -webkit-transform: translateY(25px);
  -moz-transform: translateY(25px);
  -ms-transform: translateY(25px);
  -o-transform: translateY(25px);
  webkit-box-shadow: 0 8px 24px -5px #ccc;
  -moz-box-shadow: 0 8px 24px -5px #ccc;
  box-shadow: 0 8px 24px -5px #ccc;
}

.navbar-nav .nav-item .submenu_right {
  right: 70px;
}

.navbar-nav .nav-item .megamenu {
  visibility: hidden;
  opacity: 0;
  /* width: 200px; */
  position: absolute;
  left: 0;
  background: #fff;
  padding: 10px;
  z-index: 99;
  border-top: 2px solid #000080;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform: translateY(25px);
  -webkit-transform: translateY(25px);
  -moz-transform: translateY(25px);
  -ms-transform: translateY(25px);
  -o-transform: translateY(25px);
  box-shadow: 0 8px 24px -5px #ccc;
}

.navbar-nav .nav-item .megamenu .megamenu_submenu {
  list-style: none;
}

.navbar-nav .nav-item .megamenu .megamenu_submenu {
  border-right: 2px dashed #eee;
}

.navbar-nav .nav-item .megamenu ul .list-heading {
  color: #000080;
  font-weight: 600;
  font-size: 15px;
}

.navbar-nav .nav-item div {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  padding-right: 0px;
}

.navbar-nav .nav-item .submenu li,
.navbar-nav .nav-item .megamenu ul li {
  line-height: 35px;
  font-size: 14px;
  padding: 0 15px;
}

.navbar-nav .nav-item .submenu li:focus {
  outline: none;
  border: none;
  background: #ddd;
}

.navbar-nav .nav-item .submenu li span,
.navbar-nav .nav-item .megamenu ul li span {
  float: right;
}

.navbar-nav .nav-item .submenu li a {
  text-decoration: none;
  font-size: 14px;
  color: #000;
}

.navbar-nav .nav-item .submenu li span {
  float: right;
}

.navbar-nav .nav-item:hover .submenu,
.navbar-nav .nav-item:hover .submenu_right,
.navbar-nav .nav-item:hover div {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.navbar-nav .nav-item .submenu li:hover {
  background: #eee;
}

Answer 2

如果您使用的是 bootstrap 4 尝试在导航链接上使用 mouseover 和 mouseleave 事件 和下拉菜单上的 ngclass 正如我在下面提到的

<a class="nav-link" data-toggle="dropdown"  (mouseover)="isDropdownOpen = true" (mouseleave)="isDropdownOpen = false"  data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu"  [ngClass]="{show: isDropdownOpen}"  aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options"  href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>

如果您使用的是 bootstrap 3 比使用 open 类而不是 show 类 并在导航链接如下

 <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}"  (mouseover)="isDropdownOpen = true" (mouseleave)="isDropdownOpen = false"  [ngClass]="{open: isDropdownOpen}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>  

isDropdownOpen 应该是 ts 文件中的布尔属性