how to display a dropdown ul two per row - html

Question

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.
How it actually looks:
And how I want it to be:
Just two columns displaying elements side by side, aligned to left side (of 50% width each side).
But I can't get it done, here's what I got so far
HTML
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</nav>
CSS
#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 > ul
{
display:block;
}

Answer 1

You can do something like this :
#menu ul ul li
{
float: left;
width: 50%;
}
See working demo here

Answer 2

You can use display: flex on the last ul and set a flex-basis width on the children (li). See my example below.
#menu ul li:hover > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
This is all the extra code that's needed. I also fixed your code. because the <ul> didn't have closed tag (</ul>).
#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 > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</ul>
</nav>

Answer 3

You should use display: inline-block; width width: 50% on #menu ul ul li elements:
#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;
font-size: 0; /* white spaces fix */
}
#menu ul ul li {
font-size: 1rem; /* white spaces fix */
float: none;
width: 50%;
display: inline-block;
background-color: ;
}
#menu ul ul a {
display: block;
padding: 0px 5px;
width: 100%;
background-color: ;
}
JSfiddle here.

Answer 4

This might be useful for your needs.
I don't know if you are using any framework or not, but this should work for you :)
http://alijafarian.com/bootstrap-multi-column-dropdown-menu/