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>

这个shouild让你回到正轨......

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>

<{1>} <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>

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

2 个答案: