Only three item in each column in drop-down submenu

I'm using Wordpress and I need submenu where in each column will be only three items. That mean when I have 7 items, there will be three columns and when I have 3 items then will be only one column.

Here is what I have so far - JSfiddle

HTML:

<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<ul id="nav" class="nav-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-131"> <a href="#4" class="menu parent">1st
                    English</a>

        <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132"><a href="#5">Client centrum</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-133"><a href="#7">1st English Method</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-134"><a href="#9">Price</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-135"><a href="#10">Lector team</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-136"><a href="#12">About us</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-137"><a href="#8">Classroom</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-138"><a href="#11">Guarantee</a>

            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-145"> <a href="#13" class="menu parent">Languages</a>

        <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-146"><a href="#14">English</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-147"><a href="#15">Chinese</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-148"><a href="#16">French</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-149"><a href="#17">Italian</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-150"><a href="#18">Korean</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-151"><a href="#19">German</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-152"><a href="#20">Russian</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-153"><a href="#21">Spanish</a>

            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-156"> <a href="#22" class="menu parent">Topic</a>

        <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-157"><a href="#24">Professsion</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-158"><a href="#25">Sport</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159"><a href="#23">Management</a>

            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-166"><a href="#26">Teaching</a>

    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-141"> <a href="#27" class="menu parent">On-line English</a>

        <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219"><a href="#43">On-line English</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-142"><a href="#30">1st English
                            Method</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143"><a href="#29">E-learning</a>

            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-144"><a href="#28">On-line teaching</a>

            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-165"><a href="#31">Hour</a>

    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160"><a href="#32">Test</a>

    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-154"><a href="#37">Contact</a>

    </li>
</ul>

CSS:

.main-navigation {
    clear: both;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 45px;
    position: relative;
    background-color: black;
}
ul.nav-menu, div.nav-menu > ul {
    margin: 0;
    padding: 0 40px 0 0;
}
.nav-menu li {
    display: inline-block;
    position: relative;
}
.nav-menu li a {
    color: #141412;
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus {
    background-color: #220e10;
    color: #fff;
}
.nav-menu .sub-menu, .nav-menu .children {
    background-color: #220e10;
    border: 2px solid #f7f5e7;
    border-top: 0;
    padding: 0;
    position: absolute;
    left: -2px;
    z-index: 99999;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.nav-menu .sub-menu ul, .nav-menu .children ul {
    border-left: 0;
    left: 100%;
    top: 0;
}
ul.nav-menu ul a, .nav-menu ul ul a {
    color: #fff;
    margin: 0;
    width: 200px;
}
ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, ul.nav-menu ul a:focus, .nav-menu ul ul a:focus {
    background-color: #db572f;
}
ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul {
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
}
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
    color: #bc360a;
    font-style: italic;
}
.navbar {
    border-top: 1px solid #b6985e;
    background-color: #243138;
    padding: 5px 0 0 30px;
    /*min-height: 60px;*/
}
.nav-menu li a {
    color: #FFFFFF;
    font-style: normal;
}
.sub-menu {
    display: inline-block;
    width: 500px !important;
}
.sub-menu li {
    width: 50% !important;
}
.sub-menu li a:hover {
    color: #FFFFFF;
}
.sub-menu li:nth-child(odd) {
    float: left;
}
.nav-menu .sub-menu, .nav-menu .children {
    background-color: #b6985e;
    border: none;
    padding: 0;
    position: absolute;
    z-index: 99999;
    left: 0;
}
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
    color: #FFFFFF;
    font-style: normal;
}
.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus {
    background-color: #b6985e;
}

Answers


In my view, it would be better to create your own custom menu using wp get nav menu items() , have a look at this link below , there is also an example in it, may be it could help you out.

http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items


Need Your Help

Why does my jquery function only works once?

jquery

this may sound stupid but i am a Jquery noob and I am trying to make a div tag to resize when I when swipe left and right on mobile, and I am not sure why its only executed once? can any jquery gurus

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.