使用简单的物化下拉菜单在鼠标悬停时进行多重叠加

Question

我正在尝试使用Angualar 4和Materialize

创建一个简单的下拉菜单

以下是我的问题：

图片中并不是很清楚，但你可以看到<a>有一个灰色叠加层，里面有一个<li>按钮，这是最明显的灰色。

• 如果您将图像拖到黑暗的地方，您会看到它 -

整个<a>应该是可点击的，应该是唯一出现的。我不明白为什么#dropdown-menu-main { width:270px !important; z-index:1001; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px; overflow: visible !important; } <div id="dropdown-menu-main" class="dropdown-content card white"> <ul> <li class="blue lighten-1 white-text user-details"> <app-user-menu></app-user-menu> </li> <li> <a href="/home/map" class="btn-flat waves-effect black-text"> <i class="material-icons left blue-text">local_shipping</i> Tracking </a> </li> <li> <a href="/home/map" class="btn-flat waves-effect black-text"> <i class="material-icons left blue-text">credit_card</i> Autre item 1 </a> </li> <li> <a href="/ref/other1" class="btn-flat waves-effect black-text"> <i class="material-icons left blue-text">date_range</i> Autre item 2 </a> </li> <li> <a href="/ref/other2" class="btn-flat waves-effect black-text"> <i class="material-icons left blue-text">settings</i> Autre item 3 </a> </li> </ul> </div> 出现并且更小

json