html - 多个嵌套的 CSS 菜单，垂直拉伸(stretch)

Question

这是 CSS 菜单:

http://www.devinrolsen.com/wp-content/themes/dolsen/demos/css/infinite-sub-menu/

如您所见，它是完美的、深度嵌套的——但不是 100% 宽度。这就是我想要 100% 拉伸(stretch)的。如果有 4 个菜单项，则每个菜单项的宽度必须为 25%。 这是我到目前为止所做的:

    <ul>
        <li>Menu item</li>
        <li>
            Expandable ↓
            <ul>
                <li>Menu</li>
                <li>Menu item</li>
                <li>Menu item long
                    <ul>
                        <li>Menu item long nested1</li>
                        <li>Menu item long nested2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>E
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </li>
        <li>
            Expands
            <ul>
                <li>Hi.</li>
                <li>Howdy</li>                                    
            </ul>
        </li>
    </ul>
    Don't push me down...    
    ul {
        display: table; /* Some CSS magic to make the menu... */
        width: 100%;    /* ...stretch to full width. */

        table-layout: fixed; /* Making menu items equal width */
    }

    li {
        display: table-cell; /* This comes together with ul{display:table} */
        text-align: center;    
    }

    li ul { display: none; } /* Hiding the submenus by default */

    li:hover ul {
        display: block;     /* Show submenus on mouseover...*/
        width: 100%;
        position: relative; /* ...and make them appear below, not inside */
        height:0px; /* Kind of a hack, but it's for a good reason (remove it to see why) */
    }
    li:hover ul li {
        display: block; /* Make submenu items stack vertically */
        width: 100%; /* 100% of parent container */
    }

/* Coloring */
li:nth-child(even){
    background-color: lightblue;    
}
li:nth-child(odd){
    background-color: lightskyblue;    
}

http://jsfiddle.net/6PTpd/86/

遗憾的是，它不能接受更多的嵌套元素。 (“Menu item long nested2”没有出现在第一个例子中)。

谁能帮帮我？

Answer 1

你的 li 上有填充，所以如果你将它设为 25%，我相信它会简单地跳到下一行。尝试将宽度设为 22% 之类的值，看看是否能达到您想要的效果。