Move li items in second column - CSS Only
CSS-Grid can manage that for you. Just define the number of rows you want and set the flow direction to column.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
display: inline-grid;
grid-template-rows: repeat(5, auto);
grid-auto-flow: column;
border: 1px solid grey;
}
li {
padding: .25em;
}<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
</ul>
<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
<li><a href="javascript;;">List Item 5</a></li>
<li><a href="javascript;;">List Item 6</a></li>
<li><a href="javascript;;">List Item 7</a></li>
<li><a href="javascript;;">List Item 8</a></li>
<li><a href="javascript;;">List Item 9</a></li>
<li><a href="javascript;;">List Item 10</a></li>
</ul>You can consider flexbox and a column direction with a max-height equal to the height of 5 items:
.listItems {
list-style: none;
margin: 0;
padding: 0;
display:flex;
flex-direction:column;
flex-wrap:wrap;
max-height:calc((1.2em + 8px)*5);
border:1px solid;
margin:5px;
}
.listItems li {
color: #000;
text-decoration: none;
display: block;
padding: 4px 0;
line-height:1.2em;
}<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
</ul>
<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
<li><a href="javascript;;">List Item 5</a></li>
<li><a href="javascript;;">List Item 6</a></li>
<li><a href="javascript;;">List Item 7</a></li>
<li><a href="javascript;;">List Item 8</a></li>
</ul>