https://i.sstatic.net/SK6Dw.png
My Angular application's CSS is causing the menu to not hover over all controls in the component.
CSS
nav {
background-color: #4D678D;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
background-color: #4D678D;
}
nav a {
display: block;
padding: 0 15px;
color: #fff;
line-height: 50px;
font-size: 14px !important;
text-decoration: none;
}
/* Hide Dropdown by Default*/
nav ul ul {
display: none;
position: absolute;
top: 50px;
}
/* hover */
nav a:hover {
background-color: #051731;
}
/* Display Dropdown on Hover */
nav ul li:hover>ul {
display: inherit;
}
... (continued content)
HTML
<div id="container">
<nav>
<ul>
<li *ngFor="let item of menuItems">
<a href="" [routerLink]="item.link" *ngIf="!item.children || item.children.length === 0">{{ item.label }}</a>
<a href="" [routerLink]="item.link" *ngIf="item.children && item.children.length > 0">{{ item.label }}</a>
<ul>
<li *ngFor="let child of item.children">
... (continued content)