多級ul列表定位

我有一個ul列表菜單，深入三層。我希望所有的FirstMenu列表項目水平地坐在一起，而嵌套和垂直對齊的Second和ThirdMenus坐在下面的三個水平的FirstMenu項目。我迄今爲止在CSS（浮點數，相對/絕對定位，邊距/填充）方面嘗試過的任何東西都無法使FirstMenus下降到第二和第三MenM之下。建議歡迎！多級ul列表定位

<ul id="footermenu"> 
    <li class="firstfootermenu">FirstMenu1  
     <ul class="subfootermenu"> 
     <li>SecondMenu1 
      <ul class="subsubfootermenu"> 
      <li>ThirdMenu1</li> 
      <li>ThirdMenu2</li> 
      <li>ThirdMenu3</li> 
     </ul> 
     </li> 
     </ul> 
    </li> 
    <li class="secondfootermenu"><a href="#">FirstMenu2</a></li> 
    <li class="secondfootermenu"><a href="#">FirstMenu3</a></li> 
    </ul>

來源

2012-09-14 JM673

只需使用第一ul的直接繼承者display: inline-block; vertical-align: top或float: left：http://jsfiddle.net/jmAUJ/或http://jsfiddle.net/8etkS/

編輯：更新的jsfiddle新佈局http://jsfiddle.net/jmAUJ/1/

來源

2012-09-14 16:01:23

對不起 - 一個後續問題。 Second/ThirdMenus的寬度決定了FirstMenus的位置，例如，如果我有很長的ThirdMenus，它會將最後兩個FirstMenus推到最右邊。思考？ – JM673

這是我想要複製的設計的PNG：http://i48.tinypic.com/5dm5uw.png – JM673

我編輯了原始答案。訣竅是使用'overflow：visible'和'white-space：nowrap'。 –

多級ul列表定位

回答

相關問題