Material Design Lite兩列菜單的示例 - 不適用於Chrome

Question

嘿，你們是否有一個如何有兩列菜單的例子（如果需要，用css覆蓋）？

我努力做到以下幾點：

<span id="menu-lower-left" class="select-category"><span>Select a category</span></span> 
     <ul class="category-list mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
      for="menu-lower-left"> 
     <li class="mdl-menu__item">Some Action</li> 
     <li class="mdl-menu__item">Another Action</li> 
     <li class="mdl-menu__item">Additional Action</li> 
     <li class="mdl-menu__item">Yet Another Action</li> 
     </ul> 

CSS的樣子： `

.category-list { 
    list-style-type: disc; 
    columns: 2; 
    -webkit-columns: 2; 
    -moz-columns: 2; 
    list-style-position: inside; 
    } 

` 當我試圖簡單地增加2列，它的工作原理，但我的列表項消失！

任何想法，爲什麼發生這種情況？下面是一個說明這一問題的Plunker：

http://plnkr.co/edit/d9nNB7jg4W8nsGzdlnC4

Answer 1

這似乎有在瀏覽器的錯誤，其中的過渡和轉換可以使事情多列布局消失。使用this答案修復了它。這裏是一個更新Plunker： http://plnkr.co/edit/st2RmkNbcJqTVaQG3Fna?p=preview 我只需要一件事添加到您的CSS

.mdl-menu__item { 
    transform: translateZ(0); 
    }