Css 嵌套有序列表作为多行菜单

我正在从嵌套的有序列表中构建一个带有css的菜单。我试图实现的是，将每个嵌套层放置在一个单独的行中，但尚未成功。我在codepen上创建了一个测试用例，如果有人能帮我解决这个问题，我将不胜感激。这是笔：

提前多谢

彼得

编辑：感谢您对列表正确嵌套的提示。但我仍然无法解决主要问题：如何为每个活动级别以单独的行呈现列表。我更新了代码以澄清问题：

我将非常感谢任何帮助，这解决了纯CSS的问题

---

谢谢。

您没有正确嵌套列表<代码>只能包含

。您应该将嵌套的

放入

中。大概是这样的：

<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>

main1
缅因州2
sub1
sub2
子项1

sub3

缅因州3

这会让你回到正轨上…

嵌套列表中的每个新

都应该放在

下

在您的情况下，尝试嵌套这部分代码：

<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>
        <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>