Move li items in second column - CSS Only

Question

I have UL and LI list and max item number is 10, and I am trying to move the items if more than 5 to second column and wanted to handle using CSS only, I tried with CSS3 'Column' but its going in second column with all items, how do I make sure to move the items more than 5 to second column

The problem is, LI should appear in second column only if more than 5 li and if li is 5 or less than then it should be one column

.listItems {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
.listItems li {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

<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>

Answer 1

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>

Answer 2

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>