マテリアライズCSSで複数列のドロップダウンメニューを作成するにはどうすればよいですか？

Question

私は個人的なプロジェクトに取り組んでいます。ドロップダウンメニューの要素数が多いため、複数の列（正確には2列）がうまく機能します。マテリアライズCSSでこれを達成するにはどうすればいいですか？

Answer 1

これはあなたの心に似ていますか？リスト項目を奇妙に見せるいくつかのパディングを削除するにはカスタムCSSが少し必要ですが、2つのドロップカラムが表示され、小さなデバイスでは1つにスナップします。

HTML

<div id="dropdown1" class="row dropdown-content"> 
    <div class="col s12 m6"> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
    </div> 
    <div class="col s12 m6"> 
    <ul> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
    </ul> 
    </div> 
</div> 

<nav> 
    <div class="nav-wrapper"> 
    <ul> 
     <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown</a></li> 
    </ul> 
    </div> 
</nav> 

CSS

#dropdown1 div { 
    padding: 0; 
} 

#dropdown1 li { 
    text-align: center; 
} 

JSFiddle