title: Split wordpress sub-menu into two columns
body: <p>I tried some code snippets to split wordpress sub-menu into two colums and I got some success. But they are not fully splitted. There is white space beneath odd menu-items and white-space above even menu-items. <a href="https://www.nawishta.com/" rel="nofollow noreferrer">Link for Menu</a></p>
  <p>In the above web page, Menu --&gt; Nawishta Prime Time --&gt; Season 2</p>
  <p>It seems the menu-items are not in line and creating white gaps. Following is the CSS code I used:</p>
  <pre><code>.sub-menu-columns ul.sub-menu li {
      clear: initial;
      display: inline-block;
      float: left;
      width: 50%;
  } 
  .sub-menu-columns ul.sub-menu li:nth-child(odd) {
      float: left;
      margin-right: 300px;
  }
  .sub-menu-columns ul.sub-menu li:nth-child(even) {
      float: right;
  }
  </code></pre>
  <p>I applied this class &quot;sub-menu-columns&quot; on the menu item &quot;Season 2&quot; in wordpress menu settings.</p>
  <p>What I need is to remove gaps like:
  <a href="https://i.stack.imgur.com/cyQSt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cyQSt.png" alt="enter image description here" /></a></p>