css - 多列叠加菜单，如何根据项目数确定列号

Question

所以我有一个左手导航系统，列出类别。鼠标悬停时，它会在两列中显示子类别。我想改变这一点，如果子类别少于 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 的浏览器都支持 wrapping，所以目前这仅适用于 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] */
}