0

次の問題があります。

ここに画像の説明を入力

ご覧のとおり、メニューの第 3 レベルは非常に圧縮されています。2 番目のレベルは完全に機能しています。コンテンツの正確な幅です。

HTML

<ul id="menu">
    <li>
        <a href="#">Reports</a>
        <ul>
            <li>
                <a href="#">Daily & Yearly Reports</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Daily Settlement and Funding Overview</a></li>
                    <li class="ui-state-disabled"><a href="#">ESA Statement</a></li>
                    <li class="ui-state-disabled"><a href="#">Settlement Summary</a></li>
                    <li class="ui-state-disabled"><a href="#">Save ESA Cashbook</a></li>
                    <li class="ui-state-disabled"><a href="#">ESA Interest Summary</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

<style>
    #menu {
        /*height: 48px;*/
        overflow: auto;
        width: 99.7%;
        font-size: 1em;
    }
    #menu > li {
        float: left;  
        width: auto;
        margin-top: 15px;
    }
    /*
     * Fix to make sure the menu appears above jTable
     */
    #menu > li > ul {
        z-index: 2;
    }
    #menu > li > ul > li > ul > li {
        float: left;  
        width: auto;
    }
</style>

どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

2

追加whtie-space nowrap

このように 

     #menu > li > ul > li > ul > li{
    white-space: nowrap;// add this line
float:left; // remove this line
    }

ライブデモ

于 2013-03-20T06:25:03.867 に答える