Как создать раскрывающееся меню с несколькими столбцами?

Question

Я пытаюсь создать выпадающее меню в CSS, однако у него будет около 21 подпозиции. Поэтому я хотел бы отобразить их в 3 столбцах по 7, однако я не могу понять, как это сделать.

Я создал jsFiddle с помощью простого примера, как я могу изменить CSS, чтобы суб 6-10 отображались справа от подстроки 1-5, а не ниже?

Он должен быть похож на изображение ниже, которое было создано в MS Paint.

EDIT:

jsFiddle

<nav> 
    <ul> 
    <li> 
     <a href="#">Top Level Group</a> 
     <div> 
     <ul> 
     <li><a href="#">Sub One</a></li> 
     <li><a href="#">Sub Two</a></li> 
     <li><a href="#">Sub Three</a></li> 
     <li><a href="#">Sub Four</a></li> 
     <li><a href="#">Sub Five</a></li> 
     </ul> 
     <ul> 
     <li><a href="#">Sub Six</a></li> 
     <li><a href="#">Sub Seven</a></li> 
     <li><a href="#">Sub Eight</a></li> 
     <li><a href="#">Sub Nine</a></li> 
     <li><a href="#">Sub Ten</a></li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav> 

Answer 1

Использование можно использовать float: left, чтобы сделать их складывают

Рабочий образец: http://jsfiddle.net/07spd07b/2/

#top-level-group{ 
    width: 200px; 
} 
#top-level-group ul{ 
    float: left; 
} 

В образце я изменил исходное положение с -9999px слева, чтобы вы могли видеть его прямо, когда вы открываете jsfiddle. Установите ширину в зависимости от содержимого, которое вы хотите разместить внутри. Если вы хотите, чтобы большее количество столбцов придавало ей большую ширину.

UPDATE

Вот рабочий пример с 3-мя колоннами и clearfix включены:

http://jsfiddle.net/07spd07b/10/

Я добавил класс clearfix:

.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; } 

который очищает плавающие элементы и установите width: 250px; в соответствии с тремя столбцами. Надеюсь, поможет.

Answer 2

Это можно сделать довольно легко с помощью display:inline-block;:

nav ul li ul{ 
display:inline-block; 
margin: 0; 
padding: 0; 
} 

Тогда вам просто нужно дать Div ширина:

nav ul li div { 
position: absolute; 
left: -9999px; 
width:300px; 
} 

JSFiddle Demo
Чтобы добавить несколько столбцов, просто сделать больше <ul> и установите ширину шире.

Answer 3

, пожалуйста, проверьте эту ссылку .. Я добавил два класса в <ul> теги и стили.

http://jsfiddle.net/07spd07b/