How to create dropdown with multiple columns? - html

Question

I am trying to create a dropdown menu in CSS, however it will have about 21 sub-items. I would therefore like to display them in 3 columns of 7, however I cannot figure out how to do so.
I have created a jsFiddle with a simple example, how can I ammend the CSS so that sub 6-10 are displayed to the right of sub 1-5, as opposed to below?
It should look like the image below, which was created in MS Paint.
EDIT :
jsFiddle
<nav>
<ul>
<li>
Top Level Group
<div>
<ul>
<li>Sub One</li>
<li>Sub Two</li>
<li>Sub Three</li>
<li>Sub Four</li>
<li>Sub Five</li>
</ul>
<ul>
<li>Sub Six</li>
<li>Sub Seven</li>
<li>Sub Eight</li>
<li>Sub Nine</li>
<li>Sub Ten</li>
</ul>
</div>
</li>
</ul>
</nav>

Answer 1

Use can use float: left to make them stack
Working sample: http://jsfiddle.net/07spd07b/2/
#top-level-group{
width: 200px;
}
#top-level-group ul{
float: left;
}
In the sample I changed the original position from -9999px left so you can see it right when you open the jsfiddle. Set the width depending on the content you want to put inside. If you want more columns give it more width.
UPDATE
Here is the working sample with 3 columns and the clearfix included:
http://jsfiddle.net/07spd07b/10/
I added class clearfix:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Which clears floating elements and set the width: 250px; to fit the 3 columns. Hope it helps.

Answer 2

It can be done quite easily by using display:inline-block;:
nav ul li ul{
display:inline-block;
margin: 0;
padding: 0;
}
Then you just need to give the div a width:
nav ul li div {
position: absolute;
left: -9999px;
width:300px;
}
JSFiddle Demo
To add more columns, just make more <ul>'s and set the width wider.

Answer 3

please now check this link .. I've added two class in <ul> tags and styles.
http://jsfiddle.net/07spd07b/