css - Angular 动态菜单和子菜单样式

Question

伙计们，我有动态导航栏。如果菜单有子菜单，则子菜单可用。我想在悬停的相关菜单下打开子菜单，并希望保持子菜单可见以选择他们的元素。 使用此代码，子菜单将始终显示在该 css 样式位置，当我的鼠标移到它时，菜单将消失...我该如何解决这个问题？

这是我的导航栏:

<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(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>
	    	<a href="javascript:;">Menu Item</a>
	    	<ul>
	    		<li><a href="javascript:;">Sub Item</a></li>
	    		<li><a href="javascript:;">Sub Item</a></li>
	    		<li><a href="javascript:;">Sub Item</a></li>
	    	</ul>
	    </li>
	    <li><a href="javascript:;">Menu Item</a></li>
	    <li><a href="javascript:;">Menu Item</a></li>
	    <li><a href="javascript:;">Menu Item</a></li>
	</ul>
</div>

试试这个。