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

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>

这应该会让你回到正轨......