第三级不自动调整大小

enter image description here

正如你可以看到菜单的第三个层次是非常压缩。第二级完美运作。这是在内容的确切宽度。

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>

任何帮助，将不胜感激。

感谢

来源

2013-03-20 mlevit

现在，检查我的更新答案演示是该http://jsfiddle.net/ THmub/3/ – 2013-03-21 03:48:52

添加whtie-space nowrap

作为这样

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

Live Demo

来源

2013-03-20 06:25:03

工作但不是100％。你可以在这里看到，对于一些行来说，因为它们非常短，所以在1行上已经组合了两个菜单项：http://i.imgur.com/QckggH5.png – mlevit 2013-03-20 11:12:47

@mlevit可以让我看看你的完整代码在navi的jsfiddle.net – 2013-03-20 11:13:37

这里你去http://jsfiddle.net/THmub/ – mlevit 2013-03-20 11:18:43

第三级不自动调整大小

回答

相关问题