angular dynamic menu and submenu styling - css

Question

guys i have dynamic navbar . submenu will be availbe if menu have submenu. i want open submenu under related menu which is hovered and want keep submenu visible to select their item.
with this code submenu will show always at that css style position and menu will disapear when my mouse move to it... how can i solve this issue?
this is my navbar :
<nav>
<div class="nav-wrapper grey darken-3">
<ul class="right hide-on-med-and-down second-nav">
<li *ngFor="let cat of categories">
<a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
</li>
</ul>
</div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
<ul id="hoveredCategory" class="collection">
<li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
<span>
{{ sc }}
</span>
</li>
</ul>
</div>
mycss :
.content {
background-color: #FFFFFF;
margin: 0;
width: 300px;
position: absolute;
right: 0;
min-width: 300px;
max-height: inherit;
margin-left: -1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
hover and unhover :
hover(event, category) {
this.hoveredCategory = category;
}
unhover(event) {
this.hoveredCategory = null;
}

Answer 1

.navigation ul,.navigation li{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.navigation li{
background:rgba(0,0,0,0.3);
position: relative;
}
.navigation li a {
padding: 15px;
display:block;
text-decoration:none;
}
.navigation ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
}
.navigation li:hover ul{
display: block;
}
<div class="navigation">
<ul>
<li>
Menu Item
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
Try this one.