Question

这是CSS菜单：

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

正如你所看到的，它是完美的，深层嵌套的 - 但不是百分之百的。这就是我想要100％拉伸的东西。如果有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/

遗憾的是，它不再需要嵌套项目。（“菜单项long nested2”不会像第一个示例中那样出现。）

有人可以帮帮我吗？

Answer 1

你的李子已经填充了，所以如果你把它做到25％，我相信它只会突破到下一行。尝试22％的宽度，看看是否能给你想要的效果。

多个嵌套的CSS菜单，垂直拉伸

1 个答案: