How to display a list in horizontal groups of li elements?
<p>I have a very long list of <code>li</code> elements greater than 30 items. When I display this in a <code>ul menu</code> dropdown the list stretches down vertically which requires the browser window to be scrolled down to view every list element.</p>

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

<p>what I did try is setting the style <code>.sub-menu li</code> used by the menu to <code>display: inline</code> <a href="http://css.maxdesign.com.au/listutorial/horizontal_master.htm" rel="nofollow">as suggested here</a> to display the li elements inline but that made no difference to the ordering horizontally.</p>

<p><strong>So instead of this:</strong></p>

<ul>
<li>Jim</li>
<li>Jane</li>
<li>Jack</li>
<li>Jones</li>
<li>Jackson</li>
<li>Jhonny</li>
</ul>

<p><strong>It would display like this</strong> (where each three li elements in the list is grouped horizontally):</p>

<p>Jane
John
Jared</p>

<p>Jim
James
Jones</p>

<p><strong>Question:</strong></p>

<p>How can you display a list in horizontal groupings of n li elements? </p>

<p>In my current setup I use this CSS for the menu:</p>

<pre><code>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;

            }
</code></pre>

<p>And this is the ul list which uses the sub-menu css style:</p>

<pre><code>                &lt;ul class="sub-menu" id="assetNameMenu"&gt;
                   @* li elements created in script *@
                &lt;/ul&gt;
</code></pre>