第三级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