下拉菜单很难点击MaterializeCSS

Question

我在MaterialiseCSS中遇到了一些麻烦。

我试图做一个导航栏有一个下拉按钮（用户的图像和一个向下箭头）来显示其他选项。

问题是，当我点击图像的边界时，子菜单只会被放下，而不是当我点击按钮的任何部分。

这是我使用，使在导航栏的下拉按钮的代码：

<li style="height: 100%"> 
<a class="dropdown-button" data-activates="dropdown-users" data-beloworigin="true" style="height: 100%;"> 
<img src="https://cdn1.iconfinder.com/data/icons/freeline/32/account_friend_human_man_member_person_profile_user_users-256.png" class="" style="height: 100%;"> 
<i class="mdi-navigation-arrow-drop-down material-icons right">arrow_drop_down</i> 
</a> 
</li> 

你可以看到我在这里完整代码：https://codepen.io/JPYamamoto/pen/qmjdmX

我希望你能帮助我想出解决办法。谢谢

Answer 1

触发菜单的标签由图像和下拉图标覆盖。所以我增加了一个跨度，并将其作为触发器。

Codepen

<ul id="dropdown-users" class="dropdown-content"> 
    <li><a href="#!">Submenu 1</a></li> 
    <li><a href="#!">Submenu 2</a></li> 
    <li class="divider"></li> 
    <li><a href="#!">Submenu 3</a></li> 
</ul> 
<nav> 
    <div class="nav-wrapper blue lighten-1"> 
     <a href="#" data-activates="mobile-demo" class="button-collapse hide-on-med-and-down"><i class="material-icons">menu</i></a> 
     <a href="index.php" class="brand-logo" style="height: 100%"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Suitcase_icon.svg/1280px-Suitcase_icon.svg.png" style="height: 100%; padding-left: 20px"></a> 
     <ul class="hide-on-med-and-down right" style="height: 100%"> 
      <li><a href="index.php"><i class="material-icons">home</i></a></li> 
      <li><a href="films.php">Menu 1</a></li> 
      <li><a href="planets.php">Menu 2</a></li> 
      <li><a href="people.php">Menu 3</a></li> 
      <li><a href="species.php">Menu 4</a></li> 
      <li><a href="starships.php">Menu 5</a></li> 
      <li style="height: 100%"><a style="height: 100%; position:relative"><img src="https://cdn1.iconfinder.com/data/icons/freeline/32/account_friend_human_man_member_person_profile_user_users-256.png" class="" style="height: 100%;"><i class="mdi-navigation-arrow-drop-down material-icons right">arrow_drop_down</i><span class="dropdown-button" data-activates="dropdown-users" data-beloworigin="true"></span></a></li> 
     </ul> 
    </div> 
</nav> 

CSS

span.dropdown-button { 
    position: absolute; 
    left: 0;right:0; 
    top: 0; 
    bottom:0; 
}