Dropdown-Menü schwierig zu klicken MaterializeCSS

Question

Ich habe Probleme mit MaterialiseCSS.

Ich versuche eine Navbar zu machen, die eine Dropdown-Taste (das Bild des Benutzers und einen Pfeil nach unten) hat, um andere Optionen anzuzeigen.

Das Problem ist, dass das Untermenü, nur fallen gelassen wird, wenn ich auf den Rand des Bildes klicke, nicht wenn ich auf einen Teil der Schaltfläche klicke.

Dies ist der Code, den ich benutze den Dropdown-Button in der Navigationsleiste zu machen:

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

Sie hier meinen kompletten Code sehen: https://codepen.io/JPYamamoto/pen/qmjdmX

Ich hoffe, dass Sie mir diese heraus helfen können. Danke

Answer 1

Das a-Tag, das das Menü auslöst, wird durch das Bild und Dropdown-Symbol abgedeckt. Also habe ich eine Spanne hinzugefügt und es zum Auslöser gemacht.

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