title: How to display a list in horizontal groups of li elements?
body: <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>