如何在Materialise CSS中創建多列下拉菜單？

Question

我正在處理個人項目，並且由於下拉菜單中有大量元素，因此多列（準確地說2列）會更好。如何在Materialise CSS中完成此操作？

Answer 1

這與您的想法相似嗎？它需要一些自定義CSS來刪除一些使列表項目看起來很奇怪的填充，但它會顯示兩個拖放列，並在較小的設備上對齊。

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