jquery - jQuery 菜单的第三级不自动调整大小

Question

我有以下问题:

如您所见，第三级菜单非常紧凑。第二级工作完美。它正好在内容的宽度处。

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>

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

添加whtie-space nowrap

像这样

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

Live Demo