Сложенные выпадающие списки в триггерной кнопке materializecss ниже на мобильном телефоне

Question

У меня есть серия раскрывающихся выпадающих кнопок, которые отлично работают на рабочем столе, но на мобильном телефоне (или с помощью эмулятора Chrome) нажатие на элемент выпадающего меню также вызывает кнопку под ним, которая отображает выпадающий список и т. Д.

Я просто не мог использовать раскрывающийся список materializecss, но подумал, есть ли у кого-нибудь решение для этого?

Пример здесь: https://codepen.io/phoebebright/pen/xmKdmb А вот и весь код, требуемый так ::

<div class="row">
    <div class="col s6">

        <div class="row">
            <div class="col s12">
                <h1 class="eventname">All Tests</h1>
                <div id="headline"><span id="percent">70.90</span><span id="txt">%</span>  <span class="minor">Average</span></div>
                <div id="summary"><span id="picked">5</span>&nbsp;from&nbsp;<span id="total">5</span>&nbsp; scores</div>
            </div>
        </div>

        <div class="row">
            <div class="col s12">

                <a id="group1_head" class="btn dropdown-trigger" data-filter="group1" data-target="group1_list" href="#">
                    <span class="head">All Competitions</span>

                </a>
                <ul id="group1_list" class="dropdown-content" tabindex="0">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group1_list_items">All</a></li>
                    <li><a id="di 46" href="#" class="group1_list_items">di 46</a></li>
                    <li><a id="100-102" href="#" class="group1_list_items">100-102</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <a id="group2_head" class="btn dropdown-trigger" data-filter="group2" data-target="group2_list" href="#">
                    <span class="head">All Judges</span>

                </a>
                <ul id="group2_list" class="dropdown-content" tabindex="0" style="">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group2_list_items">All</a></li>
                    <li><a id="Judge 1" href="#" class="group2_list_items">Judge 1</a></li>
                    <li><a id="Janie Scala" href="#" class="group2_list_items">Judge 2</a></li>
                </ul>

            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <a id="group3_head" class="btn dropdown-trigger" data-filter="group3" data-target="group3_list" href="#">
                    <span class="head">All Riders</span>

                </a>
                <ul id="group3_list" class="dropdown-content" tabindex="0" style="">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group3_list_items">All</a></li>
                    <li><a id="Pauline Dahill" href="#" class="group3_list_items">Joe Dahill</a></li>
                    <li><a id="Paul Mc Donald" href="#" class="group3_list_items">Paul Deakin</a></li>
                    <li><a id="Lucy Austin" href="#" class="group3_list_items">Ray Austin</a></li>
                    <li><a id="Jack Carr" href="#" class="group3_list_items">John Carr</a></li>
                </ul>

            </div>
        </div>


        <div class="row">
            <div class="col s12">
                <a id="group4_head" class="btn dropdown-trigger" data-filter="group4" data-target="group4_list" href="#">
                    <span class="head">All Horses</span>

                </a>
                <ul id="group4_list" class="dropdown-content" tabindex="0" >
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group4_list_items">All</a></li>
                    <li><a id="New Horse" href="#" class="group4_list_items">New Horse</a></li>
                    <li><a id="Bornio" href="#" class="group4_list_items">Bornagain</a></li>
                    <li><a id="Belline Rover" href="#" class="group4_list_items">Bell Beayty</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <a id="group5_head" class="btn dropdown-trigger" data-filter="group5" data-target="group5_list" href="#">
                    <span class="head">All Placings</span>

                </a>
                <ul id="group5_list" class="dropdown-content" tabindex="0">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group5_list_items">All</a></li>
                    <li><a id="1" href="#" class="group5_list_items">1</a></li>
                    <li><a id="2" href="#" class="group5_list_items">2</a></li>
                    <li><a id="3" href="#" class="group5_list_items">3</a></li>
                    <li><a id="0" href="#" class="group5_list_items">0</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div id="about" class="col s12">
                <p class="competition"></p>
                <p class="judge"></p>
                <p class="rider"></p>
                <p class="horse"></p>
                <p class="score"></p>
                <p class="place"></p>

            </div>
        </div>

    </div>
</div>

<script>
  M.AutoInit();
</script>