html - 下拉子菜单中每列只有三个元素

Question

我正在使用 Wordpress，我需要子菜单，其中每列只有三个元素。这意味着当我有 7 个元素时，将有三列，而当我有 3 个元素时，将只有一列。

这是我目前所拥有的 - 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;
}

Answer 1

在我看来，最好使用 wp get nav menu items() 创建您自己的自定义菜单，看看下面的这个链接，里面也有一个例子，可能也许它可以帮助您。

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