マテリアライズCSS：コレクション内にドロップダウンが正しく表示されない

Question

マテリアライズCSSを使用しています。私はコレクションを作成しました。私は更新と削除のオプションを表示したい。すべてのものが機能しています。 1つの小さなUIエラーは、ドロップダウンがコレクションアイテム内のクリップであることです。

コレクションのオーバーフローの隠れたルールが原因である可能性があります。

CSSのオーバーフローを変更せずに変更することはできますか？

ここに私のコードとそのスクリーンショットがあります。私は、画面上で適切に表示されるように、コレクションの最小の高さを設定し

<ul class="collection" id="products"> 
        <?php 
         while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
         { 

        ?> 
          <ul id='dropdown<?php echo $row["id"]?>' class='dropdown-content'> 
           <li><a href="product.php?id=<?php echo $row["id"] ?>">Update</a></li> 
           <li><a href="delete.php?id=<?php echo $row["id"] ?>"></a></li> 
          </ul> 
          <li class="collection-item avatar" style="opacity: 0"> 
           <span class="title"><?php echo $row["name"] ?></span> 
           <p><?php echo $row["description"] ?></p> 
           <a href="#!" class="secondary-content dropdown-button" data-activates='dropdown<?php echo $row["id"]?>'><i class="material-icons">more_vert</i></a> 
           <!-- <td style="width: 15%"></td> 
           <td style="width: 50%"></td> 
           <td style="width: 15%"><?php //echo $row["unit_id"] ?></td> 
           <td style="width: 10%"></td> 
           <td style="width: 10%"></td> --> 
          </li> 
        <?php 
         } 
        ?> 
        </ul> 

Answer 1

。

<li class="collection-item avatar" style="opacity: 0;min-height: 17%"> 
           <span class="title"><?php echo $row["name"] ?></span> 
           <p><?php echo $row["description"] ?></p> 
           <a href="#!" class="secondary-content dropdown-button" data-activates='dropdown<?php echo $row["id"]?>'><i class="material-icons">more_vert</i></a> 
          </li>