One possibility to making the submenu in the Portfolio theme two columns would be to use the "columns" property in CSS. Here is an example to illustrate the idea:
nav[role="navigation"] li ul.sub-menu {
background: #fff;
width: 435px;
height: 160px;
columns: 145px 3;
column-gap: 0;
-webkit-columns: 145px 3;
-webkit-column-gap: 0;
-moz-columns: 145px 3;
-moz-column-gap: 0;
}
nav[role="navigation"] li ul.sub-menu li,
nav[role="navigation"] li ul.sub-menu li a {
padding: 0;
border: 0;
}
nav[role="navigation"] li ul:before {
display: none;
}
nav[role="navigation"] ul.sub-menu li:first-child,
nav[role="navigation"] ul.children li:first-child,
nav[role="navigation"] ul.sub-menu li:nth-child(1):last-child,
nav[role="navigation"] ul.children li:nth-child(1):last-child {
border: 0;
}
I used Chrome 25 to test the example above. Consider the example experimental.
You will need to adjust some of the spacing on your own. One of the other rules you already have in your custom CSS affects where the submenu itself falls.
Note that the columns property is a CSS3 rule which has limited browser support. You should only use CSS3 rules with limited support like this if you choose to support visitors with modern, up-to-date web browsers. Even then, it's possible some CSS3 rules will only have partial support (for example, I tried using the "column-rule-gap" property and it didn't work in my test).
You can find out more about the columns property from the CSS3 spec here:
http://www.w3.org/TR/css3-multicol/
This site shows how much browser support the rule is getting at the moment (looks like at least partial support for the main browsers across the board).