css - 多列叠加菜单，如何根据元素数设置列号

Question

所以我有一个左侧导航系统，列出了类别。在鼠标悬停时，它会在两列中显示子类别。我想更改此设置，以便如果子类别少于 8 个，它会将它们列在一列中，如果超过 8 个，则会将它们分成两列。这是我当前的代码

#left-nav ul.level0 {
width:404px !important;
}

#left-nav UL LI.level1{
float:left !important;
width:200px;
margin:0 1px;
}

#left-nav UL LI, #left-nav UL LI.last{
background:none !important;

}

#left-nav UL LI.level1 UL{
float:left !important;
padding:1px;
}

这是我的修改不起作用...

#left-nav ul.level0 {
width:auto !important;
}

#left-nav ul.level0 nth-child(n+8) {
width:404px !important;
}


#left-nav UL LI.level1{
float:left !important;
width:200px;
margin:0 1px;
}

#left-nav UL LI, #left-nav UL LI.last{
background:none !important;

}

#left-nav UL LI.level1 UL{
float:left !important;
padding:1px;
}

Answer 1

最优雅的方法是使用 Flexbox。然而，并非所有支持 Flexbox 的浏览器都支持换行，因此目前这仅适用于 Chrome、Opera 和 IE10(Firefox 应该很快添加对它的支持)。

http://cssdeck.com/labs/ccpb0u99

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  line-height: 1.4;
  max-height: 11.2em; /* [num of items] * [line-height] */
}