title: how to display a dropdown ul two per row
body: <p>I have a Nav with some unordered elements displayed horizontally and then I have a submenu from one of those elements of the nav, so far I'm displaying all the elements inline but I would like to display them side by side, just two of them per line.</p>
  
  <p>How it actually looks: </p>
  
  <p><a href="https://i.stack.imgur.com/5u9Kt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5u9Kt.png" alt="ACTUAL LOOK"></a></p>
  
  <p>And how I want it to be: </p>
  
  <p><a href="https://i.stack.imgur.com/U2CkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U2CkK.png" alt="DESIRED STYLE"></a></p>
  
  <p>Just two columns displaying elements side by side, aligned to left side (of 50% width each side).</p>
  
  <p>But I can't get it done, here's what I got so far</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav id="menu"&gt;
              &lt;ul&gt;
                  &lt;li class="menu1"&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;VIDEOS&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;STYLE&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;BEAUTY&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;MOMS&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;ENTERTAINMENT&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href=""&gt;PETS&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="left"&gt;&lt;a href="" class="news"&gt;NEWS&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content5&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content6&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content7&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Content8&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu {
  position: absolute;
  left:80px;
  top:50%;
  transform: translate(0%,-50%);
  -webkit-transform: translate(0%,-50%);
  }
  
  #menu ul {
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
  top:50%;
  }
  
  #menu ul li {
  display: inline;
  position: relative;
  }
  
  #menu ul li a {
  color: #fff;
  text-decoration: none;
  font-family: 'Cabin', sans-serif;
  background-color: ;
  position: relative;
  padding-top: 12px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  transition: background-color 0.2s ease-in-out;
  }
  
  #menu ul li a.news {
  color:#ec008c;
  transition: color 0.2s ease-in-out;
  }
  
  #menu ul li a:hover.news {
  color: #fff;
  }
  
  #menu ul li a:hover {
  background-color: #ec008c;
  text-decoration: none;
  border-bottom: 2px solid #bf1b33;
  color: #fff;
  }
  
  #menu ul ul
  {
  display:none;
  position:absolute;
  top:100%;
  right: 0%;
  margin-left:0px;
  text-align: center;
  width: 350px;
  line-height: 60px;
  margin-top:12px;
  background-color: #243641;
  
  }
  
  #menu ul ul.longer {
  width: 150px;
  }
  
  #menu ul ul li
  {
  float:none;
  width:100%;
  background-color: ;
  }
  
  #menu ul ul a
  {
  line-height: 0px;
  padding:0px 5px;
  width: 100%;
  background-color: ;
  }
  
  #menu ul li:hover &gt; ul
  {
  display:block;
  }
  </code></pre>