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

下拉菜单难以点击MaterialiseCSS

1 个答案: