Wrap vertically like a column in HTML

Issue

I am using Div base Submenu on my site. I like to wrap vertically with a fixed-height sub menu.

I create a menu and sub menu using div. I don't want to use Ul,li. My structure is like...

<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>

Now when I run this code and hover on menu then submenu must display like:

item1   item6
item2   item7
item3   item8
item4   item9
item5   item10

When the height of submenu height is fixed like 200px, the number of submenu dynamic will be 10 or 15 or anything. I need it using CSS.

Solution

Used to Css3 Property column-count

as like this

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

Demo

Demo-2

Answered By - Rohit Azad Malik