多列疊加菜單，如何根據項目數列基數

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] */ 
}