像HTML中的列一样垂直包装

Question

我在我的网站上使用Div base Submenu。我喜欢用固定高度的子菜单垂直包装。

我使用div创建菜单和子菜单。我不想使用Ul，li。我的结构就像...

<div class='submenu">
    <div class="menu"><span>item1<span></div>
    <div class="menu"><span>item2<span></div>
    <div class="menu"><span>item3<span></div>
    <div class="menu"><span>item4<span></div>
    <div class="menu"><span>item5<span></div>
    <div class="menu"><span>item6<span></div>
    <div class="menu"><span>item7<span></div>
    <div class="menu"><span>item8<span></div>
    <div class="menu"><span>item9<span></div>
    <div class="menu"><span>item10<span></div>
</div>

现在，当我运行此代码并将鼠标悬停在菜单上时，子菜单必须显示为：

item1 item6
item2 item7
item3 item8
item4 item9
item5 item10

当子菜单高度的高度固定为200px时，子菜单动态数将为10或15或任何其他数字。我需要使用CSS。

Answer 1

用于 Css3属性列数

像这样

.submenu {
  -webkit-column-count: 2;
  -webkit-column-gap:   20px;  
  -moz-column-count:    2;
  -moz-column-gap:      20px;
  column-count:         2;
  column-gap:           20px;
}

演示版

演示2