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的浏览器都支持包装，因此目前仅适用于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] */
}

多列叠加菜单，如何根据项目数列出列号

1 个答案: