Как создать раскрывающееся меню с несколькими колонками в Materialize CSS?

Question

Я работаю над личным проектом и из-за большого количества элементов для выпадающего меню, много столбцов (точнее, двух столбцов) будет работать лучше. Как я могу это сделать в Materialize 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