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

Question

我正在從嵌套的有序列表中使用CSS構建菜單。 我要實現的目標（尚未成功）是將每個嵌套級別放置在單獨的行中。 我在Codepen上創建了一個測試用例，希望能對解決此問題有所幫助。 這是筆： http : //codepen.io/peterschmidler/pen/CkzpF

在此先多謝！

彼得

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

我非常感謝能通過純CSS解決問題的任何幫助。

謝謝。

Answer 1

您沒有正確嵌套列表。 <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>

這應該使您回到正軌...

Answer 2

嵌套列表中的每個新<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>