0

CSSメニューは次のとおりです。

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

ご覧のとおり、完全に深くネストされていますが、幅が 100% ではありません。これは私が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/

残念ながら、これ以上ネストされたアイテムを使用することはできません。(「Menu item long nested2」は最初の例のようには表示されません)。

誰でも私を助けることができますか？

4

1 に答える 1

-1

あなたはあなたのliにパディングを持っているので、25％にすると、単に次の行に分割されると思います. 幅を 22% などに設定して、希望する効果が得られるかどうかを確認してください。

于 2013-07-22T00:30:47.983 に答える