第三級不自動調整大小

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

第三級不自動調整大小

回答

相關問題