I have been struggling to make my bootstrap 4 navbar in my angular code base expand into a dropdown menu when I hover over the menu items. Despite trying various options all night, I haven't been able to find a solution that works.
Below is the HTML, TS, and CSS code for your reference.
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%;
}
Snapshot of the menu: https://i.sstatic.net/MB8mZ.png