マテリアライズCSS。どのようにドロップダウンコンテンツの上に三角形を追加する

Question

誰もが最初に表示されるようにdropdovnコンテンツに矢印を追加する方法を知っていますか？ 私の問題は、疑似要素（ドロップダウンコンテンツに）またはdivでCSSを使用して矢印を追加すると、ボタンのクリックが最初に表示され、次に矢印が表示されます（矢印はコンテンツの上に配置されます）。またhere

html{ 
 
    
 
    background: #000000; 
 
} 
 
.dropdown-content{ 
 
    margin: 20px 0px 0px 0px; 
 
    overflow:inherit; 
 
} 
 

 
.dropdown-button::before { 
 
    content: "▼"; 
 
    display: inline; 
 
    padding-right: 5px; 
 
} 
 

 
.dropdown-content:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ffffff; 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    top: 0; 
 
    right: 10px; 
 
}

<div class="col s12"> 
 
<a class='dropdown-button btn' href='#' data-beloworigin='true' data-activates='dropdown1'>Drop Me!</a> 
 

 
    <ul id='dropdown1' class='dropdown-content'> 
 
    <li><a href="#!">one</a></li> 
 
    <li><a href="#!">two</a></li> 
 
    <li class="divider"></li> 
 
    <li><a href="#!">three</a></li> 
 
    </ul> 
 
    </div>

フィドル：ここ

がその例です。

Answer 1

このように、ドロップダウンの後ろの要素の後に::を設定してみてください：

.dropdown-content:after{ 
     z-index: -1; 
    } 

Answer 2

原因.dropdown-content要素内のすべてがまで適用されることから、疑似クラスを防止すること、表示されていない

要素が表示され、擬似クラスが適用されるのに1秒かかります。

ソリューションの代わりに

1. 「表示：なし」可視.dropdown-content要素を保持するが、画面の外に移動し、オンに切り替えたときに、それが属している場所に移動します。これは、Foundation Frameworkがキャレットを正常に追加する方法です。例：http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html

2. 最初に<li>を追加して、キャレットに似たCSSイメージの背景を与えます。