2 column nav dropdown - html

Question

I have a navigation menu and I want the dropdown links to be in two separate columns.
I've tried using the columns property of CSS and have played around with other recommendations I have found online.
The html:
<nav id="nav">
<ul>
<li>Home</li>
<li>
Services
<ul>
<li><img src="images/icon_service1.png" alt="Service1" />Service 1</li>
<li><img src="images/icon_service2.png" alt="Service2" />Service 2</li>
</ul>
</li>
<li>
About
<ul>
<li><img src="images/icon_about1.png" alt="About1" />About 1</li>
</ul>
</li>
</ul>
The CSS:
I tried to post the CSS but kept getting an error that it wasn't indented properly with 4 spaces...? I'll try to post it in the comments...
The JS:
Dropdowns.
$('#nav > ul').dropotron({
offsetY: -16,
mode: 'fade',
noOpenerFade: true,
hideDelay: 400
});
The menu is displaying as a single dropdown and I want to show it as two columns.
I would preferably like to have it show two columns if there are 8 or more items in the drop down preferably, but I could set the css separately if need be.
I have tried css Columns but nothing I've tried has worked.
I'm attaching the CSS as images because the editor won't seem to let me add CSS...
enter image description here
enter image description here