html - 如何将菜单分成 4 等份

Question

有一个带有 li 和 ul 标签的菜单

<div class="menu">
    <ul class="hide-for-small">
        <li><a href="index.php">one</a> 
        </li>
        <li><a href="ac2.php">two</a>

            <ul>
                <li><a href="acc.php">1</a>
                </li>
                <li><a href="sal.php">2</a>
                </li>
                <li><a href="rec.php">3</a>
                </li>
                <li><a href="coss.php">4</a>
                </li>
            </ul>
        </li>
        <li><a href="ac3.php">three</a> 
        </li>
        <li><a href="ac4.php">four</a>

        </li>
    </ul>
</div>

我想把这个菜单分成四个相等的部分，为此我添加了

.menu {
     height:555px;
    margin-top:40px;

    width:980px;
    position:absolute;
    z-index:9999;
    top:0
}
.menu ul {
    display:inline;
    list-style:none;
    width:100%;
    position:relative;
    margin-top:40px
}
.menu li {
    float:left
}
.menu li a {
    font-family:Bariol, Arial;
    font-size:20px;
    text-transform:uppercase;
    color:#000
}
.menu li a:hover {
    opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
    float:right;
    margin-left:38px
}
.menu li:nth-child(-n+3) {
    margin-right:38px
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul {
    visibility:hidden;
    opacity:0;
    transition:visibility 0 linear .5s, opacity .5s linear;
    list-style:none;
    float:left;
    clear:both;
    position:absolute;
    margin:0;
    width:auto;
    z-index:999999
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul li {
    float:left;
    float:none !important;
    position:relative;
    display:block;
    height:25px;
    margin:0 !important
}
.menu ul li ul li a {
    font-size:15px;
    display:block;
    margin:10px 0;
    background-color: #fff
}

并将宽度从 100% 更改为 25%

.menu ul {
        display:inline;
        list-style:none;
        width:100%;
        position:relative;
        margin-top:40px
    }

但我得到了不想要的结果。

如何更改 css 以拆分为 4 个菜单？请看jsfiddle

Answer 1

使用 table-layout: fixed; 的表格布局可以将 4 个 li 平均拆分。

显示:表格；表格布局:固定； - 用于 ul

display:table-cell; 用于 li，并移除 float 用于 li。

JsFiddle