下拉菜單很難點擊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; 
}