Верхнее меню в 3 колонки

Доброе утро всем. Помогите плиз с верхним меню. У меня все пункты идут в ряд, оченб большое меню получается. Нужно, чтобы было в 3 колонки (у меня 18 пунктов) Фото прикреплю. Зарание спасибо!

Само меню

<ul class="tmenu clearfix">
<li><a href="/"><span class="fa fa-home"></span>Головна</a></li>
<li class="submenu"><a href="/film/"><span class="fa fa-ellipsis-h"></span>Фильмы</a>

<ul class="hidden-menu">
<li><a href="/f-action/">1</a></li>
<li><a href="/f-comedy/">2</a></li>
<li><a href="/f-thriller/">3</a></li>
<li><a href="/f-detective/">4</a></li>
<li><a href="/f-crime/">5</a>5</li>
<li><a href="/f-melodrama/">6</a></li>

<li><a href="/f-drama/">7</a></li>
<li><a href="/f-fantasy/">8</a></li>
<li><a href="/f-fentasy/">9</a></li>    
<li><a href="/f-history/">10</a></li>
<li><a href="/f-sport/">11</a></li>     
<li><a href="/f-music/">12</a></li>

<li><a href="/f-adventures/">13</a></li>        
<li><a href="/f-horrors/">14</a></li>
<li><a href="/f-western/">15</a></li>   
<li><a href="/f-family/">16</a></li>
<li><a href="/f-military/">17</a></li>
<li><a href="/f-documentary/">18</a></li>
                                </ul>
                        </li>

                        <li class="submenu"><a href="/serial/"><span class="fa fa-ellipsis-h"></span>Сериалы</a>

                                <ul class="hidden-menu">
<li><a href="/s-action/">1</a></li>
<li><a href="/s-comedy/">2</a></li>
<li><a href="/s-thriller/">3</a></li>
<li><a href="/s-detective/">4</a></li>
<li><a href="/s-crime/">5</a></li>
<li><a href="/s-melodrama/">6</a></li>

<li><a href="/s-drama/">7</a></li>
<li><a href="/s-fantasy/">8</a></li>
<li><a href="/s-fentasy/">9</a></li>
<li><a href="/s-history/">10</a></li>
<li><a href="/s-sport/">11</a></li>
<li><a href="/s-music/">12</a></li>

<li><a href="/s-adventures/">13</a></li>
<li><a href="/s-horrors/">14</a></li>
<li><a href="/s-western/">15</a></li>
<li><a href="/s-family/">16</a></li>
<li><a href="/s-military/">17</a></li>
<li><a href="/s-documentary/">18</a></li>
                                </ul>
                        </li>

                        <li><a href="/multflmi/"><span class="fa fa-ellipsis-h"></span>Мультфильмы</a></li>
                        <li><a href="/cartoon-serial/"><span class="fa fa-ellipsis-h"></span>Мультсериалы</a></li>
                </ul>

CSS

.tmenu {background-color: #303030; box-shadow: 1px 0 20px rgba(0,0,0,.08);margin-left: -2000px; margin-right: -2000px; padding: 0 2000px; position: relative; z-index: 200;}

.tmenu > li {display: inline-block; float: left; margin-right: 30px; position: relative;}
.tmenu > li > a {display: block; height: 60px; line-height: 60px; font-weight: 500;}
.tmenu .fa {color: #ccc; margin-right: 10px;}
.share-box {float: right !important;}
.share-box .share {margin: 0; margin-top: 11px; margin-right: -30px;}
.tmenu > li > a:hover, .tmenu .menuactive > a {color: #e74c3c;}
.hidden-menu {position:absolute; left:0; top:100%; z-index:998; background-color:#303030; width:240px;
box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); display:none;}
.hidden-menu a {display:block; padding:12px 15px; border-bottom:2px solid #252627; 
font-size: 12px; text-align: left; white-space: normal;}
.submenu > a:after {content:"\f107 "; font-family:'FontAwesome'; margin-left:7px; opacity: 0.4;}