作爲多行菜單嵌套的有序列表

我正在用嵌套的有序列表構建一個帶有CSS的菜單。我試圖實現的目標 - 沒有成功 - 是每個嵌套級別都放在一個單獨的行中。我在codepen上創建了一個測試用例，我希望能夠解決這個問題。這是筆：http://codepen.io/peterschmidler/pen/CkzpF 作爲多行菜單嵌套的有序列表

非常感謝！

彼得

編輯：謝謝你的提示列表的正確嵌套。但我仍然無法解決主要問題：如何爲每個活動級別在單獨行中呈現列表。我更新了代碼以澄清問題：http://codepen.io/anon/pen/lzHda

我非常感謝任何幫助，它解決了純CSS的問題。

謝謝。

來源

2012-07-30 Peter Schmidler

您沒有正確嵌套您的列表。 <ol>只能包含<li>。您應該將您的嵌套<ol>放在<li>內。事情是這樣的：

<ol> 
<li>main1</li> 
<li>main2 
    <ol> 
    <li>sub1</li> 
    <li>sub2 
    <ol> 
     <li>subsub1</li> 
    </ol> 
    </li> <!-- closing sub 2 --> 
    <li>sub3</li> 
    </ol> 
</li> <!-- closing main 2 --> 
<li>main3</li> 
</ol>

這shouild讓你重新回到正軌

來源

2012-07-30 21:13:56 Pevara

每個新<ol>嵌套列表應該<li>下放置。

在你的情況下，嘗試拼圖您的這部分代碼：

<ol> 
    <li> 
     <a href="about-team"class="active">Team</a> 
    </li> 
    <ol> 
     <li> 
      <a href="about-team-peter">Peter</a> 
     </li> 
     <li> 
      <a href="about-team-schmidler">Schmidler</a> 
     </li> 
    </ol> 
</ol>

在<li>。像這樣：

<li> 
     <a href="about-team"class="active">Team</a> 

      <ol> 
      <li><a href="about-team-peter">Peter</a></li> 
      <li><a href="about-team-schmidler">Schmidler</a></li> 
      </ol> 
</li>

來源

2012-07-30 23:03:58 Andy

作爲多行菜單嵌套的有序列表

回答

相關問題