What is the best way to design a dropdown menu with multiple columns?

Question

What is the best way to design a dropdown menu with multiple columns?

I'm attempting to design a dropdown menu using CSS with 21 sub-items. I want to display them in 3 columns of 7, but I can't seem to figure it out.

I've set up a simple example on jsFiddle, how can I adjust the CSS so that sub items 6-10 appear to the right of sub items 1-5 instead of below?

The layout should resemble the image I created in 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>

html css

Answer 1

Answer №1

To stack elements, you can apply the CSS property float: left.

For a live example, check out this fiddle: http://jsfiddle.net/07spd07b/2/

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

In the provided sample, I moved the original position from -9999px to the left so that it is visible when opening the jsfiddle. Adjust the width based on your content needs, and feel free to add more columns by increasing the width.

UPDATE:

Check out the updated sample with three columns and a clearfix included:

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

I've introduced a new class called clearfix:

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

This class helps clear floating elements and sets the width: 250px; to accommodate the three columns. Hopefully, this explanation proves useful!

Answer 2

To stack elements, you can apply the CSS property float: left.

For a live example, check out this fiddle: http://jsfiddle.net/07spd07b/2/

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

In the provided sample, I moved the original position from -9999px to the left so that it is visible when opening the jsfiddle. Adjust the width based on your content needs, and feel free to add more columns by increasing the width.

UPDATE:

Check out the updated sample with three columns and a clearfix included:

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

I've introduced a new class called clearfix:

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

This class helps clear floating elements and sets the width: 250px; to accommodate the three columns. Hopefully, this explanation proves useful!

Answer 3

Answer №2

To achieve this effect easily, you can utilize the display:inline-block; property:

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

Once that is set, you simply need to specify a width for the div container:

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

Check out this JSFiddle Demo for reference.
To incorporate more columns, just create additional <ul> elements and adjust the width accordingly.

Answer 4

To achieve this effect easily, you can utilize the display:inline-block; property:

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

Once that is set, you simply need to specify a width for the div container:

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

Check out this JSFiddle Demo for reference.
To incorporate more columns, just create additional <ul> elements and adjust the width accordingly.

Answer 5

Answer №3

Take a look at this link for some added classes in the <ul> tags along with styles.

http://jsfiddle.net/07spd07b/

Answer 6

Take a look at this link for some added classes in the <ul> tags along with styles.

http://jsfiddle.net/07spd07b/

What is the best way to design a dropdown menu with multiple columns?

Answer №1

Answer №2

Answer №3

Similar questions

Align navigation items in the center of the navigation container

By combining TCPDF with basic HTML, you can easily generate a detailed table of contents

What is the best way to prevent the mat-options from overlapping with a fixed mat-toolbar header when scrolling?

Supported video formats in various web browsers

The issue with the Hellip symbol not functioning correctly persists within the URL location

Selecting CSS paging in JQuery Jtable

Slide toggle in jQuery reveals itself briefly before vanishing

Bootstrap doesn't display in the dropdown menu

The Conundrum of CSS versus Razor Views

Conceal the URL and any parameters upon successful completion of AJAX request

Transitioning the Background Image is a common design technique

Does WebSVG struggle with producing sharp, defined lines in its inline format?

Div sliding down from the top of the page

Move your cursor over the image to see a different image appear

struggling to access the value of a hidden field by using the parent class name

Having trouble compiling your Vue project and running into the "No mixed spaces and tabs" error?

Missing 'id' property in ngFor loop for object type

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Arranging sibling buttons to wrap seamlessly like text

The page only appears properly after clearing the cache