角度动态菜单和子菜单样式答案

【问题标题】：angular dynamic menu and submenu styling角度动态菜单和子菜单样式
【发布时间】：2018-08-24 06:07:54
【问题描述】：

伙计们，我有动态导航栏。如果菜单有子菜单，子菜单将可用。我想在悬停的相关菜单下打开子菜单，并希望保持子菜单可见以选择他们的项目。使用此代码，子菜单将始终显示在该 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;

  }

【问题讨论】：

你可以使用简单的 css 来做到这一点

标签： css angular angular5

【解决方案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>

试试这个。

【讨论】：