ドロップダウンメニューのクリックが難しいMaterializeCSS

Question

MaterializeCSSに問題があります。

他のオプションを表示するためのドロップダウンボタン（ユーザーの画像と下矢印）があるナビゲーションバーを作成しようとしています。

問題は、サブメニューが画像の境界線をクリックしたときにのみドロップされることです。ボタンの一部をクリックしたときではありません。

これは私がナビゲーションバーにあるドロップダウンボタンを作るために使用するコードです：

<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; 
}