How to display a list in horizontal groups of li elements?

Question

I have a very long list of li elements greater than 30 items. When I display this in a ul menu dropdown the list stretches down vertically which requires the browser window to be scrolled down to view every list element.

I'd like to do is group each row in the list to display 3 li elements instead of one per row in the ul menu.

what I did try is setting the style .sub-menu li used by the menu to display: inline as suggested here to display the li elements inline but that made no difference to the ordering horizontally.

So instead of this:

• Jim
• Jane
• Jack
• Jones
• Jackson
• Jhonny

It would display like this (where each three li elements in the list is grouped horizontally):

Jane John Jared

Jim James Jones

Question:

How can you display a list in horizontal groupings of n li elements?

In my current setup I use this CSS for the menu:

nav li:hover .sub-menu {
    z-index: 2;
    opacity: 1;
    min-width: 100px;
}

.sub-menu {
    width: 100%;
    padding: 0px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #425563;
    text-align: center;
    display: inline-block;
}

    .sub-menu li {
        display: inline-block;
        font-size: 15px;
        float: left;
        margin-top: 0px;
    }

        .sub-menu li a {
            padding: 10px 5px;
            display: block;
            text-decoration: none;
            text-align: left;
            z-index: 3;
        }

            .sub-menu li a:hover, .sub-menu .current-item a {
                background: #01a982;
                -moz-box-shadow: 0 0 5px 0px #888;
                -webkit-box-shadow: 0 0 5px 0px #888;
                box-shadow: 0 0 5px 0px #888;
                color: #000;
            }


            .sub-menu li a input {
              display: inline-block;

            }

And this is the ul list which uses the sub-menu css style:

                <ul class="sub-menu" id="assetNameMenu">
                   @* li elements created in script *@
                </ul>

Answer 1

Floats can do this quite simply.

You just clear the float after every this li

ul {
  list-style-type: none;
}
li {
  float: left;
  padding: 0 1em;
}
li:nth-child(3n+1) {
  clear: both;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

For inline-block there is an similar option as detailed in the answer to this question by @phrogz

ul {
  list-style-type: none;
}
li {
  display: inline;
}
li:nth-child(3n)::after {
  content: "\A";
 white-space: pre;
  ;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

Answer 2

As an alternative, if you don't mind using newer CSS, you could do this with flexbox, too:

ul {
  display:         flex;
  list-style-type: none;
  width:           300px;
  flex-wrap:       wrap;
}

li {
  flex: 33%;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>