html: vertical (instead of horizontal) sub-menus in main-menu (only CSS)

mercredi 29 juin 2016

Please see picture

We usually use this CSS style float: left; to create horizontal sub-menu but I need to make a main-menu fixed height and vertical sub-menus.

Besides, I want the sub-menus to be automatically organized in columns containing 6 items each.

If removed float: left; the sub-menus are display vertically but I can't organized them in columns with fixed number of items.

Please be attention that sub-menus are not static and will be create automatically also I use bootstrap grid system too!

Menu will be created with this HTML Code:

<ul class="level1">
    <li class="level2 nav-1-2-1">item1</li>
    <li class="level2 nav-1-2-2">item2</li>
    ....
    ....
</ul>

html