2栏导航下拉列表

Question

我有一个导航菜单，我希望下拉链接位于两个单独的列中。

我尝试使用CSS的columns属性，并尝试了我在网上找到的其他建议。

html：

<nav id="nav">
<ul>
    <li><a href="index.html">Home</a></li>
    <li>
    <a href="#" class="arrow">Services</a>
        <ul>
            <li><a href="service1.html"><img src="images/icon_service1.png" alt="Service1" />Service 1</a></li>
            <li><a href="service2.html"><img src="images/icon_service2.png" alt="Service2" />Service 2</a></li>
        </ul>
    </li>
    <li>
    <a href="#" class="arrow">About</a>
        <ul>
            <li><a href="about1.html"><img src="images/icon_about1.png" alt="About1" />About 1</a></li>
        </ul>
    </li>
</ul>

CSS：

我试图发布CSS，但是不断出现错误，指出它没有正确地缩进4个空格...？我会尝试将其发布在评论中...

JS：

下拉列表。

  

$（'＃nav> ul'）。dropotron（{       offsetY：-16，       模式：“淡入淡出”，       noOpenerFade：是的，       hideDelay：400   }）;

菜单显示为单个下拉菜单，我想将其显示为两列。

如果下拉列表中最好有8个或更多项，我希望将其显示为两列，但是如果需要，我可以分别设置css。

我已经尝试过css Columns，但是我尝试过的一切都没有用。

我将CSS附加为图像，因为编辑器似乎不允许我添加CSS ...

enter image description here

enter image description here